creating a list of clickable elements - html

Question

I'm trying to create a bar for social media icons that looks like this
But I'm really stuck.
I tried creating it like this:
<div class="social-media">
<ul>
<li class="facebook">facebook</li>
<li class="instagram">instagram</li>
<li class="twitter">twitter</li>
<li class="youtube">youtube</li>
</ul>
</div>
.social-media ul li {
display: inline-block;
}
.social-media ul li.facebook:after {
content: url('../images/facebooklogo.png');
width: 21px;
height: 21px;
}
And so on for each li.class
But the issue was that the images ignored the width and height I specified here, and were huge. I just couldnt seem to target them
The second thing is, I didnt know how to make them whole thing clickable, when I tried using an "a" tag, it didnt target the image specified by the li:after, only the text inside the li
Am I just going about this the wrong way? is it better to use a bunch of nested divs, and use onclick to make the whole thing a link?
Any help would be great, I'm pretty confused.

Answer 1

I would use
<li><a class="facebook" href="thisIsYourFacebookPage.html">My Facebook page</a></li>
And give the image you want with
a.facebook:before {
background: url("to/the/path/to/my/image");
width: 21px;
height: 21px;
display: inline-block;
content: " ";
}
Like this: http://jsfiddle.net/gVp2P/1/

Answer 2

You can't specific a url for content, as far as I know. But you don't need to use pseudo elements here. Just specific the background-image of each <li>
.social-media ul li{
display:inline-block;
width: 21px;
height: 21px;
}
.social-media ul li.facebook {
background-image: url('../images/facebooklogo.png');
}
If you want them to be clickable links, you really don't even need the ul li. Just use <a> directly, give it a class, facebook, linkedin, etc, then the following CSS.
.social-media a {
display:inline-block;
width: 21px;
height: 21px;
}
.social-media a.facebook {
background-image: url('../images/facebooklogo.png');
}

Answer 3

You should also consider the icons as font's instead of images.
The reason is they scale better, lookin really nice even if your users zoom or use retina displays, and you can just add css colors, shadows and so on just as you would do styling your text.
read on here:
http://icomoon.io/