Icon fonts have been around for a while now, but they’ve just recently started to take the dev world by storm. Why? Developers are realizing that they’re waaaay better than icon images! If you’ve ever carefully placed an icon image in your design, just to find that it turns into a fuzzy blob of color when you switch devices, you know the struggle. My firm’s dev team sure does. That’s why I’m thrilled to introduce our solution that’s attractive from all angles.
Notice the fonts in the top screenshot stay crisp, but the icon images and logo shown in the image below are fuzzy – this is where icon fonts could have saved the day with crisp, clear social links and a quality resolution logo.
What is an icon font?
Icon fonts are vectors, rendered to the size set by the CSS. They scale just as a vector graphic would, generating a clear image no matter the screen size or resolution. Although developers were a bit reluctant to jump on the bandwagon with this trend at first, they’re quickly realizing the value icon fonts have to offer when it comes to creating sites that meet the design industry’s ever-rising standards. Their enhanced flexibility in design and adjustment allows designers to illustrate fully the site’s points without disrupting functions that the dev and the SEO teams will have to deal with later.
Still not ready to dump your icon images? I know it’s hard. That’s why I’ve provided my team’s three solid reasons for ditching icon images and replacing them with their newer, better-looking version – icon fonts:
1. They respond
Few things are more annoying than working with a design element that just doesn’t get the message you’re trying to send. This is the problem with icon images. They don’t respond to screen size, leaving you with a pixelated mess when you switch devices. On the other hand, icon fonts know what you want and have the flexibility to deliver. They shrink and expand to produce crisp, clear images, no matter the viewing device. Their responsiveness also gives you more freedom in sizing for design purposes. But really, what’s hotter than a design element that listens?
2. They don’t make you wait
No matter the prize at the end, no one wants to wait. You probably already know this to be true when it comes to your site and its conversion rate. That being said, it’s also safe to say that you’ve attempted to cut file sizes and maintain cleanliness throughout the dev process to decrease load time and ultimately, appease the end user. What you may not already know is that icon fonts are one more quick and easy way you can contribute to faster load times.
While icon images take up valuable load time and server storage as they get ready to make their appearance, icon fonts contain fewer characters, meaning they come in smaller file sizes that take less time to show up. Their ability to load faster ultimately contributes to your efforts to decrease the load time of the entire page. Will they make a significant difference on their own? No. But if you’re already working to create a faster site and icon fonts are able to contribute in even the smallest way, why not make them a part of your strategy?! It’s details like these that get your consumers where they want to be, faster.
This many images could take up quite a bit of load time. Good thing you’re running this graphic at the most efficient speed with fonts!
3. They know their place in your design
It’s always best to keep presentation elements out of the site content. The bad thing is, this is impossible when you use icon images. Icon fonts don’t cause this problem. Because they’re displayed through the CSS, they allow you to use the icons you need, where you need them, and without adding presentation elements to the content.
Only three reasons?
Yes, I’ve only given you three reasons here, but they’re the only three you need! The implementation of icon fonts is a major part of building a site that functions at the highest level possible. There are a lot of icon font sites out there that will allow you to develop the custom icon fonts you need. You can use any of these with a good program and reputable source (my team uses
icomoon.io). Find an icon font site that works best for you then start optimizing your sites’ functionality and appeal by making icon images a thing of the past!
These are premade options. You can also create your own custom fonts through a simple process
Getting Started
You know what they are. You know how they work. Most importantly, you know why they’re better. What’s next? Implementation! For most of your icon font needs, icomoon.io provides free icons. If you’re not loving the fonts they have to offer, you can design and upload your own for free. This can be done by simply creating the font you need in Adobe Illustrator (or another similar program) then saving it as a 400×400 pixel SVG file and uploading it to IcoMoon. Once you’ve found or installed your font, adding it to your site is easy. If you’re using Word Press, IcoMoon can automatically incorporate the font to your CSS. For other site creation platforms, you can install your icon fonts to the CSS as you would any other font.
Getting Help
IcoMoon provides a fairly intuitive step-by-step process to get you started. For additional help, we recommend the CSS Tricks video,
Creating and Using a Custom Icon Font . This clip is about 20 minutes long and covers all the bases. Need more? The great thing about trending topics is that everyone is talking about them. This is great news for those of you who are geared up and ready to start using icon fonts. Should you run into a speed bump along the way to icon font bliss, there are a lot of tech savvy bloggers and forum contributors who are ready to help. A quick search on your question should result in the answer you need. The amount of information available is more than enough to turn you into the icon font master you’re so longing to become.
Wrapping it Up
As this article comes to a close, I hope I’ve given you enough tools and information to hit the ground running with icon fonts. Have additional questions/comments for my dev team? We’d love to hear them! Tell me what you think about all of this in the comments section below!
