Font icons for the win

18 Feb 2013 by Chris
1 Comment
Font icon

All hail the mighty location pin!

Here at Primate we have a pretty good understanding of how to implement icons on the web sites we build. I really enjoy having this little part of development covered as icons can improve the context of content or add decorative flourishes independently of markup. Using a font file for icons is king, in our opinion, especially when developing responsive sites.

The flexible key to building responsive sites

Font icons are very well suited to being part of a responsive site and there are three killer ingredients:

Firstly, it’s highly efficient to package icons into a single font file, reducing the amount of server requests required to download and view pages. Mobile internet connections are not lightning fast and it’s important to reduce server requests wherever possible.

Secondary (and perhaps the biggest advantage of using font icons), is that you can specify their size and colour through CSS. Varying the size of a font icon is done through the CSS style font-size whilst varying the colour of the font is done using the style color. Being able to specify colour and size in CSS gives you room to tweak and change icons easily and I find this flexibility invaluable when developing a responsive site as, generally speaking, you will adjust the size of text as the page shrinks and grows. It’s fantastic being able to easily adjust icons as the font size changes.

There is a related drawback though in that font icons can only be of a single colour – if you need to produce icons of multiple colours then using a font is not an option although for us this is not so much of an issue as we tend to use icons of a single colour most of the time.

Last but not least, your font icons are scalable and will scale up very smoothly when viewed on a retina display. This is an important point as it means you can use the same icon resource on a standard resolution display as on a high resolution display.

You do know how to create a font file right?

Just as a heads up, I’m not making the assumption that everyone knows how to make a font file! Who on Earth knows how to make a font? If you’re reading this and thinking “I do” then that’s cool because I sure didn’t know how to so if you don’t either then it’s really not too big of a problem.

There is a fantastic site and app named IcoMoon that helps you manage, organise, and create icon font files. I would really recommend checking out the app as we’ve found it incredibly helpful, so much so it’s now what we use as standard when creating icon font files. I advise that you check out the save/load session feature which is available when using Chrome only.

Tips for development

Our preferred method for adding icons to markup elements is to insert content using the :before or :after pseudo selector. The inserted content is then styled to display the icon as required.

There are a few different ways that you can play with :before and :after content though. You could absolutely position it relative to it’s parent or you could display it inline and have it as part of centered text or you could simply float it. With these three options you are pretty well set to be able to put your icon exactly where you would like it. Below are a few live examples:

Absolutely positioned example.

Centered example.

Floated example.

Text indent example

Text indent can cause problems


It’s really worth mentioning that in the last example the use of a font icon is in combination with a CSS text-indent. As your font icon is text, if the parent container has text positioned off screen using text-indent then your icon is also going to be positioned off screen. Fortunately the way to fix it is really simple and it’s just a case of giving the :before or :after content a text-indent value of zero. Absolutely positioning your icon and hiding the text is a great little trick too for turning a plain old link into a nice button.

Check out the code below which shows the important styles used to create the examples above. Like I said, the examples are live, so if you would like to tweak and experiment with them using your browser’s element inspector, please do so.


.absolute_example {
  position: relative;
}
.absolute_example:before {
  display: block; position: absolute; bottom: -120px; left: 30%;
  content: "*"; font-size: 200px; line-height: 200px; color: #FEA701;
}
.centered_example {
  text-align: center;
}
.centered_example p:before {
  display: inline; margin: 0 10px 0 0; content: "*"; font-size: 22px; line-height: 22px; color: #FEA701;
}
.floated_example:before {
  display: block; float: right; content: "*"; font-size: 22px; line-height: 22px; color: #FEA701;
}
.text_indent_example {
  position: relative; text-indent: -99999px;
}
.text_indent_example p:before {
  text-indent: 0; display: block; position: absolute; top: 7px; left: 0; width: 100%; text-align: center;
  content: "*"; font-size: 40px; line-height: 40px; color: #FEA701;
}

Wrap up

This has been a short punchy post briefly outlining why and how we like to use font icons: they are efficient and flexible, perfect for a responsive build. They are great for static builds too, of course, but you really appreciate being able to control your icons through CSS when you’re working on content breaking points on mobile and tablet devices. Likewise, using :before and :after psuedo selectors to insert icons is a great approach to maintaining clean markup.

If you don’t currently use font icons then it may take a little experimentation to get used to using them but it’s definitely worth it and I’m sure you won’t regret it.

If you liked this article then why not subscribe to our RSS feed.

Author: Chris Lamb

Chris is terrible at coming up with taglines.

Comments

Showing One Comment

Leave a comment
  1. Dale Sande 20 Apr 2013 at 3:26 am

    I LOVE using icon-fonts, but I HATE writing all the manual CSS. Doing this harks me back to the days of manually writing sprite CSS.

    If you use Sass and HAML, this is a great read on how to use these tools and remove repetitive code from your life.

    http://blackfalcon.roughdraft.io/4731881

Leave a Reply