Blogs

An Introduction to Icon Fonts with Font Awesome and IcoMoon

George Martsoukos
Share

Icon fonts are all the rage nowadays, with more and more developers taking advantage of them in their designs. If you haven’t yet looked into icon fonts, this article can get you started.

I’ll demonstrate the great things we can achieve using icon fonts but first I’ll take a look at what icon fonts are and what are their pros and cons. Then, we’ll examine two popular icon fonts and we’ll see different examples showing how we can use them in our projects.

What are Icon Fonts?

Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text which has made them a popular choice on the web.

Pros and Cons for Icon Fonts

There are some significant benefits to using icon fonts instead of bitmap images in your projects. Here are some of those:

  • You can apply any CSS effects to them.
  • Because they are vector graphics, they’re scalable. That means you can scale them up or down without losing their quality.
  • You send one single or few HTTP request(s) to load them instead of multiple HTTP requests that bitmap images might require.
  • They load fast because of their small size.
  • They’re supported in all browsers (even back to IE6).

So, are icon fonts appropriate for all cases? No, of course not. They’re an excellent way to enhance the design of a project but they also have limitations. For example, if you want to show a complex image on your project instead of a simple icon, then icon fonts aren’t the best solution.

They’re also usually limited to a single color, unless you apply some CSS tricks. Moreover, icon fonts are designed according to specific grids, for instance 16px16, 32×32, 48×48, etc. If for some reason you change the grid system to 25×25, you’ll probably not get crisp results (specific CSS properties can also help).

Beyond icon fonts, it’s worth mentioning that there’s also another popular solution for vector icons: SVG icons. These have the ability to overcome some of the problems that icon fonts may have. For example, you can apply more than one color to them.

In the rest of this article, we’ll cover the basics of the following two icon font libraries:

We’ll show four different examples that use icon fonts.

Font Awesome Icons

Font Awesome is a rich collection of 439 icons. This library is completely free either for personal or commercial use. Originally, it was designed for Bootstrap, however you can use it in any of your favorite frameworks.

Getting Started with Font Awesome

The simplest way to include Font Awesome in your project is through a Content Delivery Network (CDN). If, however, you’re working off-line, you’ll have to download the icon pack.

You also have to find and include the CSS file and the generated fonts folder containing the different font formats. Then, you have to add the CSS file to your HTML document. Finally, you have to verify that the @font-face src URL paths in your CSS file correspond to the appropriate folder. For a complete list of all the possible ways to set these icons for your projects, see their getting started guide.

In order to use the icons, you have to place them inside either a span or an i element. Then, you have to assign them two classes. The fa class plus a second class, which should be the name of the icon you want to add to your project, for instance fa-home. In their cheat sheet you can see the names of all the available icons in the package.

Additional predefined classes allow you to easily customize the icons. For more information regarding these classes as well as examples of how to use them, go here.

Let’s now see in action three different examples that use the Font Awesome icon pack.

Font Awesome Example #1

In this first example, we are creating a vertical navigation menu. First we wrap the icons inside an i element and we double their size relative to their container’s size, using the predefined fa-2x class. Then, we style them using CSS.

The HTML for two nav items would look like this:

<li>
    <a href="#" data-name="Home">
        <i class="fa fa-home fa-2x"></i>
    </a>
</li>
<li>
    <a href="#" data-name="About">
        <i class="fa fa-bullhorn fa-2x"></i>
    </a>
</li>

And here’s the relevant CSS:

nav li {
    background: #ededed;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
}

nav li:not(:first-child) {
      margin-top: 1px;
}

nav li a {
    outline: none;
    position: relative;
    width: 100%;
    height: 100%;
}

nav i {
    color: steelblue;
    vertical-align: middle;
}

nav li a:after {
    background: #ededed;
    content: attr(data-name);
    display: none;
    margin-left: 1px;
    width: 160px;
    height: 80px;
    left: 80px;
    position: absolute;
    font-size: 1.2em;
}

nav li a:hover:after {
    display: inline-block;
}

And the result is in the demo below:

See the Pen Font Awesome Icon Font example #1 by SitePoint (@SitePoint) on CodePen.

Font Awesome Example #2

In this next example, we will create a simple social network panel. For this, we wrap the icons inside an i element and we double their size relative to their container’s size, using the predefined fa-2x class. Then, we style them using CSS.

The HTML for a single icon will look like this:

<a href="#" title="Like us!">
    <i class="fa fa-facebook fa-2x"></i>
</a>

And the CSS to style the icons:

section a {
  padding: 7px;
  color: black;
}

section i {
  vertical-align: middle;
  transition: color .3s ease-in-out;    
}

section a:nth-child(1):hover i {
  color: #3b5998;
}

Here’s a demo:

See the Pen Font Awesome Icon Font Example #2 by SitePoint (@SitePoint) on CodePen.

Font Awesome Example #3

In this third example, we use the icons on a login form. We use the icons in the same way as the previous examples. We just apply another predefined fa-fx class to icons to set them a fixed width (approximately 1.25em).

The HTML and CSS are similar to the previous examples, and here is the result:

See the Pen Font Awesome Icon Font Example #3 by SitePoint (@SitePoint) on CodePen.

Notice the icons in use on the form as well as on the social links.

IcoMoon Icons

IcoMoon is another popular icon font solution. It comes with two icon packs, one open source and one premium (essential and ultimate options). For more information about these packs, go here. Depending on the package you choose, the number and the format of the available icons will be different. For example, the number of the icons for the free pack is 450, but for the ultimate pack it’s 1266.

Beyond these packages, IcoMoon provides an online app where you can search and download more than 3500 icons for free. This app provides a few basic editing options, including options to rotate them, change their color, and more.

There’s also the option to import your own icons or even to create your own custom icon fonts. Finally, there are some free and paid (basic and unlimited options) plans.

Getting Started with IcoMoon

The package you select for download includes icons in different formats (for instance SVG, PSD, AI). Using the web application, once you select the icons you want, you can download them either in SVG format (we won’t use this option) or as icon fonts.

As soon as you download the icons, you have to include in your projects the CSS file and the generated fonts folder containing the different font formats and verify that the @font-face src URL paths in your CSS file correspond to the appropriate folder.

There’s also the option of a quick usage link that you can directly add to your HTML document (think about it as a link to a CDN) and then you’re able to use the icons you selected. However, this option is permanent only for the premium plans. Basic plan offers also this option, but usage is limited to one day.

Similar to font awesome icons, in order to use IcoMoon icons you have to place each of them inside a span element. Then you have to assign a class, which should be the name of the icon you want to add to your project, for instance icon-home. You can also customize the icon names (instead of the default prefix, you can set your own prefix) from the Preferences tab, before you download the icon fonts.

Let’s look at an example.

IcoMoon Example

In this example, we will use the icons to create a section related to the working process of our company. We wrap the icons inside a span element and we style them using CSS.

The HTML for two icons looks like this:

<li>
    <span class="icon-pencil"></span>
    Analyze
</li>
<li> + </li>
<li>
    <span class="icon-paint-format"></span>
    Design
</li>
<li> + </li>

Our CSS:

section li:nth-child(even) {  
  color: #ededed;
  width: 6%;
  font-size: 2.5em;
  height: 63px;
  margin-top: 31.5px;
  line-height: 63px;
}

section span {
  padding: 15px 0;
  font-size: 5em;
  display: block;
  color: steelblue;
  transition: all .2s ease-in-out;
}

section li:hover span {
  transform: translateY(-10px);
}

And the demo:

See the Pen IcoMoon icon font example by SitePoint (@SitePoint) on CodePen.

Conclusion

I hope you found this tour of two of the most popular icon fonts interesting and maybe this will encourage you to use one of them in an upcoming project.

If you know any other icon fonts or web projects that take advantage of these in order to create interesting designs, feel free to share them in the comments.