How to replace anchor link by image

[newcoder1010]

Hello,

HTML:

<ul class="SocialMediaMenu list-inline"><li class="fb first leaf">
  <a href="https://www.facebook.com/p" title="facebook" target="_blank">f</a></li>
<li class="tw last leaf"><a href="https://twitter.com/P" title="twitter" target="_blank">t</a></li>
</ul>

I have this css to replace the a link by an image.  Color is transparent. After I have the background image, I dont see the list items. They just disappear. 

.SocialMediaMenu a {
    display: block;
    height: 40px;
    line-height: 40px;
    width: 40px;
    border-radius: 30px;
    color: transparent;
    text-align: center;
    /* font-size: 2em; */
    float: left;
    border: 0;
    margin: 10px;
    background-image: url("/DAVIS%20LOGO_0.png");
}

Please advise. 

[Ingolme]

Have you verified that the image was loaded? Open the developer tools (Pressing F12 on the keyboard) and make sure that "DAVIS LOGO_0.png" is getting a 200 status in the network tab.

[dsonesuk]

If you inspect the anchor, it will show background-image styling showing link to image, if you hover over that link it will show the image, OR failed to load error message.