Font icons are awesome!
As the use of font icons continue to increase in popularity, there are more and more services that offer easy-to-use font packs with a wide array of icons to choose from. Font icons are used on websites in place of image icons. Before font icons were used in web design, a designer would have to save a set of image icons, typically png files with transparent backgrounds.
A common solution designers would use in the past would be to create what is called a sprite image. The sprite image would be one png file that contains a set of several icons. The sprite would include icon hover states and other commonly used graphics on the site. The benefit of an image sprite is that it reduces page load time because rather than the browser requesting a collection of several icon graphics that are used throughout the page, the browser only needs to make one http request for the sprite. The sprite image would then be used on the page by placing a div on the page and specifying the size, background image, and position using CSS. With the combination of those CSS properties, developers would essentially be creating a small window of view and position the background image to reveal the specific icon in the sprite they would like to show. Aligning the sprite image properly was a tedious task for both the developer coding the web page, as well as the designer who created the sprite. A common example of a sprite image is shown below for Yahoo’s website.
Now that font icon packs are readily available for use, most notably Font Awesome, Fontello, and IcoMoon - both designers and developers can save a great deal of time to get set up and begin using their icon font pack. Without any extra configuration, the Font Awesome has 605 icons readily available to use!
If hundreds of readily available icons is still not enough of a reason for you to begin using font icons on your website, there are other great benefits to consider.
- You’ll never have to pull your hair out over an image sprite again, would be that it scales for any device. Because the icon pack is actually a font, it can be resized to any size while preserving pixel-perfect clarity. You simply cannot do this with images - such as a sprite. With image sprites, developers are restricted to the dimensions that the icon is used in the image file. If the icon is 16x16 px, then you cannot go up to 32x32 px, or 64x64 px without a loss of image clarity - font icons can be any size. Images saved for the web are saved at 72 ppi. PPI means Pixels Per Inch - and for most computer screens this looks fine. However, devices such as mobile phones and tablets use a much higher screen resolution, so the standard 72 ppi image would appear slightly blurry. Font icons are not limited to a specific ppi, and scale up or down automatically when the device interprets the font you are using. This is the exact same functionality that makes standard text on a page crisp and clear - because both are interpreted by the device as a font.
- You can further control their appearance with CSS in much more depth than just the dimensions. With just a few lines of CSS, designers can specify properties such as color, and then even make the color change on hover state. Another option would be to add a shadow to the icon - this can be done using just CSS as well!
Considering all of the benefits for font icons, it becomes clear why designers and developers have adopted this into their workflow for building websites. The workflow process is much more streamlined, and there are many more aspects that you can control much more easily, with the power of CSS. Most importantly, you can have confidence that your font icon will be crisp and clear on any device that visits your website. As a final thought, just consider the latest iPhone - the 6 plus model, has a display with an astonishing 401ppi!
How to use font awesome icons on your CM1 Website
Adding font icons to your website is easy! Simply add the following code to the header section of your template and you are ready to get started.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
This is a CDN link to the font awesome CSS file hosted by maxCDN.
Once your template has the Font Awesome CSS added to the head tag, you are ready to begin using it! Below is an example of a page that is using the facebook font icon.