Web Development Recipes, 2nd Edition

Recipe 6

Using Font Icons

Problem

Adding icons to a website can help illustrate what a button does or where a link goes, highlight a message, or otherwise clarify a page’s components and functions. But creating those icons can be a lot of work, especially if you’re not a graphic designer. Whether we’re creating a site concept, redesigning an existing page, or working on a project without access to a designer, it’d be great to have access to icons that are easy to use and modify, that add visual interest, and that have a uniform look—without having to go dig around the web for icons.

Ingredients

• CSS3

• Font Awesome^[13]

Solution

Font icons are vector images that can be manipulated with CSS, enabling us to have lightweight icons that are easily adaptable ...