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.
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.
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.
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.
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.
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.
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.
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.