CODEWITHSUNDEEP
htmlcssfacebook
Eddie
Eddie

Reputation: 59

How to Style List with image

How would you style this code so I would add a social media icon after the text?

<li class="facebook"><a href="http://www.facebook.com/3ndvorg/">Follow On Facebook</a></li>

I would like to add the Facebook image icon just after the "Follow On Facebook" text...

Thanks

Upvotes: 0

Views: 94

Answers (2)

Town
Town

Reputation: 14906

Add a background to the a tag, like this:

.facebook a { 
   padding-right: 20px; 
   background: url(yourimageurl.png) no-repeat right;
}

Demo on jsfiddle

EDIT: updated demo with implementation to match image in comments.

Upvotes: 1

ifaour
ifaour

Reputation: 38135

You could just include the "icon" as img tag: 

<li class="facebook"><a href="http://www.facebook.com/3ndvorg/">Follow On Facebook&nbsp;<img src="path/to/icon.jpg" alt="Facebook Icon" /></a></li>

Or you could use something like: 

.facebook a {
    background: url('path/to/icon.png') right center no-repeat;
    padding-right: 10px; /* icon width + some pixels for spacing */
}

Upvotes: 0

Related Questions