Some common elements of the blog design, like social or navigation icons, are still handled by images, while there is a much better alternative.
Once you discover Fontello you’ll never want to use images again.
Fontello is a growing repository of all kinds of icons to be used in web design. These icons are used like fonts, and all what you can do with fonts applies to them as well.
The best thing is that you don’t have to download the entire font set to get just two or three social media icons. You can select desired fonts from different collections from different authors and install this selection, and nothing more, as a font folder in your theme’s directory.
Why icon sets are better than images
Using icon fonts will require some learning (mainly regarding the style.css file). Once you’ll manage your first icon, things will get much easier.
Icon font sets are better for responsive design
Icons from Fontello are used with :before or :after tag for css elements. For example, you can design your own share buttons. With the text “Tweet it” you can use an icon which is a Twitter logo, etc.
Now, if you are about to redesign your blog to be fully responsive, icon fonts will require less effort to make them look good on every screen size and in every screen resolution.
At the basic level, if you’ll want to increase font size for mobile screens let’s say from 14px to 17px, all what you have to do is to give an icon an em or % value. Then, the icon will be resized together with the css element it’s attached to.
With images it’s much less flexible. The icon image that is 20px by 20px is fine on a large screen, but it will stay 20px by 20px on a mobile device (too small) unless you apply new rules within a specific media screen.
Next thing is Retina. Icon fonts are resizable. They are sharp and crispy on Retina. With images, for every icon image you’ll need to create another one, that is twice as big, to call it on Retina displays.
Icon font sets are better for page speed optimization
Let’s say you have five icons on your site. You can have five images, each one for each icon. But that means you’ll call your server five times. This is bad for your blog’s performance.
Page load time is important, so important that it’s being reflected in Google Page Rank.
Go to Google’s tool called PageSpeed Insights and test your site. See how many things are there to be changed or improved. With images you may need to:
- use sprites – images that include all icons from your blog; you can call a specific one by background position,
- compress images – using Yahoo Smush.it tool.
With icon fonts it’s easier. Fontello font set will make one request from a server. Eight icons I have on my blog are 4 kB in size – less than a single icon image.
A wide choice of icons
All beautifully designed, the icons from Fontello represent the wide range of possible uses:
- social icons – included in several font sets, you can choose from logos of several social networks, not only most popular ones
- share buttons – these logos can be used to design share buttons
- arrows – all shapes and directions
- navigation – home icon, drop down menu icon, among others
- user actions – close, play, share, search, comment, download, to name a few
What’s more, if you won’t find a specific icon you want, you can add your custom icon in svg format and have it returned as a font.
Soon I’ll write a simple guide how to install and use Fontello icons on a WordPress blog, so stay tuned.
[pi-archive number=5 tag=”wordpress” ]
Writer Updated 