The Beauty of Icon Fonts

15205722901_209ccdaba1_b.jpg

Icon fonts have become an incredible tool for implementing an icon set on your website. They’re especially useful for keeping an icon's quality intact when displayed on different screen sizes and densities, not to mention the bonus of a single HTTP request to load the entire icon set instead of multiple separate images.

Icomoon: Making Your Job Easy

The last few sites I've worked on made use of icon fonts by utilizing an app provided by Icomoon. This wonderful app makes it incredibly easy to pull together a collection of icons and generate the necessary font sets and css for a site. They start you off with a great assortment of icons to choose from, but the real power behind this app is the ability to upload your own custom icons and add them as a set. Also, keep in mind that you have the ability to store and load sessions with an exportable .json file, making updates or additions to your icon set a breeze.

Icomoon UI

Once you've chosen the appropriate icons, you can set up preferences such as css class prefixes, baseline and em sizes, and ligatures.

Download your font collection and add this folder to your site's files. I'm using these icons within my Drupal theme, so I've created a folder in my theme's root called icons and placed my fonts inside, under a fonts directory. Be sure to update the @font-face paths in your css based on where you decide to store your font files. I also like to add my stored-session.json file and custom icons to this icons folder, just in case someone else may need to make some changes to the font family within Icomoon or tweak the SVG files.

Ligatures, I Love You, But You Need More Support

Ligatures are a beautiful and powerful tool for outputting character combinations as your icon. For instance, let's say you want the text submit to turn into a mail icon. In Icomoon, with ligatures enabled in the preferences, you can set the value of your icon to submit. Now with the appropriate class added to the area containing the submit text, you'll have your nifty mail icon displayed where this text would appear.

This is especially handy with input.form-submit buttons. Using a hook_form_alter in your Drupal template.php file, you can set the icon-mail class and the input value to submit. Just keep in mind that pseudo elements do not work on inputs, so you will need to add your icon's font-family to the icon class itself. Now your submit input will display the mail icon instead of text. Awesome!  Well. Almost. Unfortunately, browser support is an issue (IE9 and below cannot display ligatures) so using them is more of a progressive enhancement, if you don't mind your text displaying instead of an icon for older browsers. However, you can use a conditional stylesheet for IE9 and below to display a background image instead, if you decide you'd like to try using ligatures.

[prism:css] input.icon-mail { font-family: 'my-icons'; } [/prism:css] [prism:php] function theme-name_form_alter(&$form, &$form_state, $form_id) { $form['actions']['submit']['#attributes']['class'][] = 'icon-mail"; $form['actions']['submit']['#value'] = t('submit'); } [/prism:php]

Keeping it Crispy

Icomoon also helps you work toward the most crisp display possible for your icons. It is recommended to display icons in multiples of their optimized size, so if your set is optimized for 16px, you will see the best results by setting the font size to 16px, 32px, 48px and so on. As explained in Icomoon's documentation, it also helps to set the -webkit-font-smoothing: antialiased property and to prioritize SVG fonts above other formats.

Adding Icons

Adding icons to your html is as a simple as adding a new element with the icon class before your text. If you want to add a magnifying glass icon to your search link, you can simply drop in before the link text. Alternatively, you can add a class to the element where you'd like to have the icon display and use the :before pseudo selector to line the icon up with your text. This comes in extremely handy when using an arrow or chevron icon for your elements.

When adding my icons in Drupal, I like to use jQuery to add the class to the proper elements. If I wanted all of my elements to use the arrow icon, I'd include

[prism:javascript] $('li').addClass('icon-arrow'); [/prism:javascript]

in my markup.

To display the icon nicely with your text, just add some simple css:

[prism:css] li.icon-arrow { position: relative; padding-left: 12px; } li.icon-arrow:before { position: absolute; left: 0; top: 0; } [/prism:css]

Screen Readers

Since icon fonts will not usually be read by screen readers, including a simple

[prism:markup] [/prism:markup]

element with text can be a helpful addition. Then you can set your css to push the text off screen for general browsing but still have it be read aloud for those using screen readers.

IE7 and Below

IE7 and below don't support pseudo elements, so Icomoon includes an lte-ie7.js file with your collection. By using this file and being sure to set the PUA or Basic Latin encodings in your Icomoon preferences, you can now use your fonts in these older browsers.

Resources

Chris Ferdinandi has an excellent article that goes more in-depth on the subject of Icomoon and icon fonts that you need to check out. Also, take a look at this demo on CSS-Tricks on why icon fonts are awesome. And if ligatures sends exciting chills down your spine, have a look at a Webdesign Tuts tutorial for creating your logo as a web font ligature.