Mastering CSS

Icon fonts

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 ...