× {{alert.msg}} Never ask again
Receive New Tutorials

Pros & Cons for Icon Fonts Like Font Awesome – Design Tips for Developers

– {{showDate(postTime)}}
Web developers *love* using icon fonts like Font Awesome – what are some of the drawbacks and potential limitations to consider when we use them?
From the Codementor design office hours, O’Reilly book author Jason Pamental covered a lot of ground for this topic.  

I think icon fonts are pretty awesome.  I really like working with them a lot, and I think, in most cases, that’s totally fine. There is one major drawback about them, though.

An icon font is just like any other font that you might be using, but it’s just made up, literally, of icons.

They might be social media stuff, they might be icons of your own design, they could be all sorts of things.  They’re really awesome, and they’re a great way to provide resolution-independent graphic assets to your site.  They’ll look great on retina displays and everything else.

Icon Fonts: No good fallback

The thing that you have to watch out for is there’s no good fallback.  So, if the web font doesn’t load, there’s just nothing there.  While I still use them, it’s because I haven’t gotten my act together enough to try Grunticon.  That is something from the Filament Group that they created in order to let you take SPG graphics and create PNG fallbacks and the CSS to use them. That way, you could have all these icons that work in a resolution-independent manner just using SPG, and then still have PNG there as a fallback for devices that don’t understand SPG, which is a pretty small percentage these days.

The reason I think this is important and worth thinking about is that there’s always a point in time when the web font is not loaded.  So, there’s always going to be a point in time in that load process when your icons aren’t there, and if there’s no good fallback, people have no idea what those things are.  They don’t know that it’s a link to your Facebook profile.  They don’t know that it’s an element that’s supposed to guide you through the UI and indicate that this is a list of articles.  So, it is worth thinking about.

Icon Fonts don’t work well for international audience on Opera Mini

You also have to consider that if you have a very international audience, there are tons of devices, 350 million of them or so, that are using Opera Mini that doesn’t support icon fonts or any kind of a font at all. That is kind of a big problem if you work on an international site that has a ton of traffic from areas of Africa, India, or Asia.  That is something to think about.  I think that if you have a largely U.S.-centric audience, then maybe that’s fine.  I know I rely on it.

Using Modernizr to Check

If you use  Modernizr built into your code, then you can do a bunch of features detects and find out if web fonts will be supported.  Hopefully, that will answer your question there.  In general, you can probably say, “Sure, I’m going to use icon fonts because they’re supported pretty much anywhere,” unless you fall into that category of dealing with a lot of people with slow connections and using really low-capability handsets that need to get all of this stuff right away.  Take a look at Grunticon from the Filament Group, and that will give you an easy way to go around that and use SPG instead.  Hopefully that answers your questions.

Other posts in this series with Jason Pamental:

Jason Pamental
Jason Pamental
Web Strategist, Designer & Technologist w/20 yrs experience on the web
I've been designing & developing for the web since Mosaic & Netscape 1, with a background in Graphic Design. I've spent more years building technology solutions (in Witango, PHP, .NET) than I care...
Hire the Author

Questions about this tutorial?  Get Live 1:1 help from Design experts!
Friendly, patient coach for Ruby, Rails, Golang with 4+ experience. Microservices enthusiast with 2yrs experience using Docker, Kubernetes, Kafka, GRPC
Ask me anything :) I'll do my best guiding you in areas of back end development using Rails, Golang, Version Control System (Git), and tiny hacks...
Hire this Expert
Solomon Kingsley John
Solomon Kingsley John
Software Engineer - Fullstack
I'm an experienced software engineer, with years of experience working with HTML5/CSS3/PHP/JS. I've built scalable applications that support...
Hire this Expert
comments powered by Disqus