Jump to content

How to replace anchor link by image


newcoder1010
 Share

Recommended Posts

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...