Using Fontello to Only Load Icon Fonts That You Need

It is commonplace to see icon fonts used for a range of simple graphical elements around the web, from the display of social media icons inside sharing buttons on a website to a speech bubble icon that tells readers about the number of comments on an article.

There are a number of features that make icon fonts so useful. Firstly, unlike regular images, font icons have no pixelation on high-resolution screens. They can scale up as much as needed without blurriness. Secondly, a lot of their properties can be controlled directly using CSS. You can change their size and color, or apply text-shadows with a few lines of CSS. They are also much easier to use than image sprites.

Before getting too deep into icon fonts, if you are starting a new web design from scratch, keep in mind that using SVG images might be a better approach. We've explored a comparison of the two approaches here at SitePoint in the past. SVG images have some clear advantages, for example, you can create multi-color icons and your SVG images can also look sharper than icon fonts. On the other hand, if your project needs to support legacy browsers or your team has not yet taken the step of changing its workflow to accommodate SVG icons, it is worth looking into ways in which it's possible to optimize the use of icon fonts at least.

If you have worked with icon fonts before, you have most probably used or heard about Font Awesome. In version 4.7, Font Awesome provides 675 different icons for users to use in their projects. The icons provided by this font range from Facebook and Twitter icons to objects like a bathtub and thermometer. The only problem? You won't probably use all 675 icons in a single project. Loading the whole font file just to use about 10 or 20 icons increases the page load time unnecessarily. This issue is not specific to just Font Awesome but most icon fonts in general.

In this tutorial, you will learn about Fontello. It is a great service that is free to use and allows you to create icon fonts from vector images. You can also combine icons from multiple open source projects like Font Awesome, Entypo and Typicons in a single file.

Creating a Font Using Built-in Icons

The first step in creating your own font is selecting all the icons that you need from the Fontello homepage. Let's say you want to use font icons with social media buttons. You can start by selecting icons for Facebook, Twitter, Pinterest and LinkedIn.

Once you have selected all the icons, you can click on the "Customize Names" tab to change the name of icons. For example, the Facebook icon has the name icon-facebook but you can change it to icon-fb if you wish.

Continue reading %Using Fontello to Only Load Icon Fonts That You Need%

by Asha Laxmi via SitePoint