Help a Programmer Out
I do not call myself a designer by any stretch of the imagination. And this site is a testiment to that fact. However, I do try and make it somewhat pretty and with Twitter Bootstrap it is easier than ever. Today I made a little change to my site using another awesome library, Font Awesome. From my understanding, this is a iconic font designed for Bootstrap. Perfect.
What I Had
The change is small, but using Font Awesome I was able to get rid of the 8 images that were used on my homepage.
The four awesome social network icons were provided by Neil Orange Peel, but with images comes a lot of weight to your network connection. Each icon has two states, its normal state and a hover state. This means that there are 8 images for this simple visual representation.
Enter Font Awesome
Font Awesome is a font that you add through CSS and I simplely added it through the provided CDN as follows:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css" />This gives me all the power granted with using Font Awesome. Reading through the examples, I created a faximily of the icons I used on the homepage with the following code:
<div class="social-buttons">
<span class="twitter-button">
<a href="https://twitter.com/joshfinnie">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</span>
<span class="github-button">
<a href="https://github.com/joshfinnie">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github-alt fa-stack-1x fa-inverse"></i>
</span>
</a>
</span>
<span class="linkedin-button">
<a href="https://linkedin.com/in/joshfinnie">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</span>
<span class="instagram-button">
<a href="https://instagram.com/joshfinnie">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</span>
</div>This code gives me a very nice copy of the icons I was using before:
They are very similar to what I had, except of course the different icons for Github. This is unfortunate since I kind of really enjoyed Niel Orange Peel’s version better than Font Awesome’s version. Oh well.
The next thing I wanted to accomplish is to get the hover-over effects that I had with the images. After some Googling around, I added the following CSS to my website:
a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
.twitter-button > a:hover {
color: #47bff5;
text-decoration: none;
}
.github-button > a:hover {
color: #333;
text-decoration: none;
}
.linkedin-button > a:hover {
color: #3893c4;
text-decoration: none;
}
.instagram-button > a:hover {
color: #3e6c93;
text-decoration: none;
}
.google-plus-button > a:hover {
color: #df5138;
text-decoration: none;
}
.stack-overflow-button > a:hover {
color: #fe8224;
text-decoration: none;
}
a:active {
color: #000;
text-decoration: none;
}The results look great, and I am very happy with how easy it was to remove 8 images from my network load with some simple CSS.
Postmortem
I am not sure if this actually did anything, nor save any network load or load-time, but it was a fun project none-the-less. Let me know if you find this helpful or if I am missing something completely with this process. Thanks!