-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

In this section, we'll look at how we can add an icon font to our website. Icon fonts work nicely when you have solid, colored icons that are used on your site. Instead of having every image as a separate request, all icons are part of one request for the entire font—this is faster. Since we're not using images, we can use CSS to provide the color and size of the image, meaning we can make the icons larger without losing fidelity. We'll showcase our icon fonts in the footer. So first, we'll have to build the footer for both pages, then we'll download a free icon font from the ZURB Foundation. Next, we'll use CSS to add the icon fonts to our website. Last, we'll add a :hover
state to the icons to experiment with how we can use CSS to change their appearance.
So here's what we're shooting for in the footer of our final website:
We want three columns of links, with each link accompanied by an icon. Traditionally, you would do this with images, but that can be a hit...