Tools We Use: Font Awesome, Glyphicons and Dashicons

by Jason Unger, Founder

Insights / Digital Ink / Tools We Use: Font Awesome, Glyphicons and Dashicons

This is the seventh in an irregular series of blog posts about the tools we use to design, develop and maintain websites and the digital products we create. We’ve previously written about Soliloquy and Cycle2 sliders, the Pingdom Website Speed Test, Sprout Social, Chrome Developer Tools, Free Stock Photos and Google Webmaster Tools.

We’re not believers in re-inventing the wheel. When things work, we love to use them.

For example, the Bootstrap framework has become standard in nearly every one of our projects because the code is clean, it allows for responsive design out of the box, and easily integrates with WordPress.

It’s a go-to tool for us.

Most of our sites require icons or symbols for standard functionality: email links, media, creative bullet points, and more. And rather than design new icons, we use libraries. These libraries allow us to use their icons and symbols in our designs, adjusting their size, color and display however we’d like.

One of the biggest benefits of using icon libraries is that the actual icons are not technically images: they’re built using CSS. That means your browser doesn’t need to download an additional file for each icon; by simply including the stylesheet in your site, we can use any icon we want.

Here’s a few we use, and how we use them.

Glyphicons

Glyphicons is a library developed by Jan Kovarik, who built the set “with an emphasis to simplicity and easy orientation.”

All of the symbols are monochromatic, and while they’re inspired and often used in Apple software – including iOS and watchOS devices – they’re perfectly suitable for use online.

Licenses for Glyphicons can be purchased online, but more than 250 of the glyphs are included with Bootstrap (how convenient!).

Using Glyphicons is incredibly easy. Simply use this format:

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

In this instance, replace glyphicon-search with the name of the icon you’d like to use. This example also uses the aria-hidden code, which will hide simple CSS decorations from screen readers and accessibility software.

Font Awesome

Font Awesome is another icon library of icons that’s constantly adding new symbols and is also incredibly easy to integrate into your site.

On their overview page, you can take a look at the entire icon set, which is broken out into different categories, including payment icons, video player icons, web application icons, medical icons, brand icons, and more.

Using a Font Awesome symbol is as easy at:

<i class="fa fa-camera-retro"></i>

They also have a few more standard options for display, including built-in code for size, width, border, animation and more. Take a look at the examples page to see what you can do out of the box.

Dashicons

Dashicons is “the official icon font of the WordPress admin.” They’re a little different than Glyphicons and Font Awesome in that they’re not really intended to be used on the front-end of a site, but instead in the back-end Dashboard.

You can use them in your site designs, but the library is much smaller and generally intended for the admin. For example, there’s icons for buttons in the TinyMCE editor, post formats, taxonomies and media types. They’re not generally what you would use in a design.

We normally use Dashicons when we’re adding a custom post type, like Events or Members. To specify an icon when creating a custom post type, use this example code:

function wpdocs_create_post_type() {
     register_post_type( 'acme_product',
          array(
               'labels' => array(
               'name' => __( 'Products', 'textdomain' ),
               'singular_name' => __( 'Product', 'textdomain' )
          ),
          'public' => true,
          'has_archive' => true,
          'menu_icon' => 'dashicons-products',
          )
     );
}

Set the ‘menu_icon’ parameter to the Dashicon you’d like to use.

If you would like to use a Dashicon on the front-end of a site, work off of this example:

<span class="dashicons dashicons-smiley"></span>

Icons, Icons Everywhere

Using icon libraries allows us to include creative and recognizable symbols without having to re-create the wheel every time we need an email link or video player icon.

They’re easy to work with, easy to adjust and load quicker than images, making them an indispensable tool we use.