How to Use the Icon Font

Need a fallback for Iconic's SVG? Look no further.

Why icon fonts?

We're obviously big fans of SVG, but there are some strong reasons for using icon fonts. Icon fonts give you compatibliity with older browsers, less HTTP requests (if you're using a lot of different icons) and fairly minimal code to display them. We tend to think icon fonts are best suited for rapid prototyping, supporting very old browsers, or when you just need basic icons on the screen with no fuss.

We've put a lot of work into creating a great version of Iconic in font format. We've separated each size of our icons into a different weight—which makes switching font sizes a breeze. We've also created a bunch of helper styles that allow you to do some really great stuff with our icon font without any hassle.

Putting Iconic's font on the page

Let's start with the basics by getting an icon to show up. The process couldn't be much easier. First off, we need to add our CSS files in the head tag. Iconic's font support goes back to Internet Explorer 8—but we don't want to ugly-up our code to do so. That's why we have two CSS files.

<link rel="stylesheet" href="PATH/TO/iconic-glyphs.css">
<!--[if lt IE 9]>
  <link rel="stylesheet" href="PATH/TO/iconic-glyphs-legacy.css">

One important note - make sure to update the path to Iconic's fonts in the CSS files to reflect the file structure on your server.

Once that's done, we can display our icon by adding a span tag (it can be any tag, but we suggest span) with class iconic and a data-glyph attribute set to the icon of your choice. Each icon detail page has all the info you need to display it as a font. For an example, check out our Arrow icon detail page.

<span class="iconic" data-glyph="heart" title="heart" aria-hidden="true"></span>

There you go, you have an icon on the screen.

We use attribute selectors as our CSS solution because we think it provides a cleaner syntax and opens up some interesting opportunities in the future. Attribute selector support goes back a long way, so no need to worry.

Displaying different sizes

We make a big deal that Iconic is designed at three individual sizes—and we have a great way of applying those sizes to our font. Each size is treated as different weights in a single typeface. Meaning all you need to do is change the font-weight of an icon to change its design. We've created some helper classes for you to change icon sizes in a way that ensures that the icon looks crisp and clean. You'll be happy to hear that we use the same classes to size our font as we do our SVGs.

All icons by default are set at the small size. As seen below.

<span class="iconic" data-glyph="microphone" title="microphone" aria-hidden="true"></span>
<span class="iconic iconic-md" data-glyph="microphone" title="microphone" aria-hidden="true"></span>
<span class="iconic iconic-lg" data-glyph="microphone" title="microphone" aria-hidden="true"></span>

By adding the iconic-md class, the microphone icon now displays at its higher fidelity and at its optimal size.

And it's probably no surprise that the iconic-lg class, sets the icon at its highest fidelity and optimal size.

<span class="iconic iconic-size-lg" data-glyph="microphone" title="microphone" aria-hidden="true"></span>
<span class="iconic iconic-icon-md iconic-size-lg" data-glyph="microphone" title="microphone" aria-hidden="true"></span>

Pairing with text

Icons are often adjacent to text, but sometimes they're meant to replace text. We've got you covered both ways. Any tag defined to display an icon that has text will set the icon to the left of the text.

<span class="iconic" data-glyph="thumb-up" title="like" aria-hidden="true"> Like</span>

However, if you'd like the icon to take the place of the text, simply add the iconic-text-replace tag and the text will be hidden.

<span class="iconic iconic-text-replace" data-glyph="thumb-up" title="like" aria-hidden="true"> Like</span>

Visual Adjustments

Sometimes you'll need to flip icons around to better fit your design. This too is a piece of cake.

The iconic-flip-horizontal, iconic-flip-vertical and iconic-flip-horizontal-vertical classes will flip your icons horizontally, vertically and horizontally/vertically, respectively. But that much was pretty obvious.

<span class="iconic iconic-lg" data-glyph="magnifying-glass" aria-hidden="true"></span>
<span class="iconic iconic-lg iconic-flip-horizontal" data-glyph="magnifying-glass" aria-hidden="true"></span>

<span class="iconic iconic-lg" data-glyph="wrench" title="wrench" aria-hidden="true"></span>
<span class="iconic iconic-lg iconic-flip-vertical" data-glyph="wrench" title="wrench" aria-hidden="true"></span>

<span class="iconic iconic-lg" data-glyph="paperclip" title="paperclip" aria-hidden="true"></span>
<span class="iconic iconic-lg iconic-flip-horizontal-vertical" data-glyph="paperclip" title="paperclip" aria-hidden="true"></span>

Modifying our stylesheet

As much as it shocks us, not all of you may want your icon containers and borders to be colored gray. The good news is that we've thought of that. We've provided comments in our stylesheets which will give you all the info needed so you can tweak to your heart's content.

It's worth mentioning that our font stylesheets come in LESS, SASS and Stylus, which makes modifying our styles even easier.

Not a bad "backup" if we say so ourselves

We didn't want to make the font version of Iconic just so we could check it off the list. We think it's a great addition to our system and will come in handy for all sorts of occasions.