Icon Fonts (by Crystal Petersen)

What Are Icon Fonts Anyways?

Icon fonts are simply fonts you display on your webpage just like any other font. The difference is icon fonts have symbols as characters instead of the traditional ABC alphabet you’re used to.

Using icon fonts can be pretty great for a couple of reasons. First of all, websites love them because they load a ton faster than linked pictures, speeding up overall loading times. They can also be styled with CSS just like any other font can. You can quickly and easily change the size and color, even add drop shadows or gradients if you’re feeling fancy. All the symbols in icon fonts are also vector graphics, which means you don’t have to worry about losing any quality as you size them up and down. They’re even supported in all browsers. So your site can maintain it’s cohesive design even in Internet Explorer!

However, using icon fonts isn’t the best choice for every graphic your page might contain. They’re generally pretty simple, so any complex graphics you have in mind will still have to rely on linked image files. Despite this limitation, icon fonts are a great resource for situations needing to display information in a simple and quick way.

There’s two hugely popular sets of icon fonts commonly used today – Font Awesome and IcoMoon. The two differ in how they’re added to your code, and both have their advantages and disadvantages for various situations.
Before we get started, go ahead and create a new HTML document with the basic generic structure and name it “iconfonts.html.”

FONTAWESOME

With a name like Font Awesome, there’s a lot expected from this first icon font. No worries, however, Font Awesome certainly lives up to its inflated name.

There’s a few ways to install Font Awesome and use it on your site, but today we’re going to go with the one of the easiest routes by linking directly to the file online.

First, copy and place the link below between your header tags:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>
To use Font Awesome icons, you have to place them within a or an element. You must then assign them two classes depending on how you want them to look. The first class you will assign will be the fa-class. The second will be the name of the icon you want to use. For example, if I wanted to add a camera icon to my page, the resulting code would look something like this:


Go ahead and add that line of code to your HTML document and check out the camera icon in your browser. Pretty awesome, right? For a complete list of all available icons and their tags, you can check out:

http://fortawesome.github.io/Font-Awesome/icons/

That’s Cool, but How Can I Customize These Icons?

Font Awesome has included a ton of different ways to customize the icons already in the CSS file you just downloaded. One easy way to begin is by making the icons larger by adding “fa-lg” to the icon’s tag. Your camera icon’s tag will now look something like this: 

As you can see, that made the icon a bit bigger, but not by much. To really customize the icon’s size, you can substitute the “lg” with a number from 1 to 5 plus x. So, for example, if I wanted my camera icon even bigger, the code would now look like:

That’s the biggest you can get the icon using Font Awesome’s built in CSS, but of course you can create your own CSS and continue to increase the camera’s size if you wish.

Another cool trick included in Font Awesome is the ability to stack icons. For example, if I wanted to use the icon for Apple, but I wanted it to be in a circle, I could simply stack the two on top of each other using “fa-stack”. Delete the code that calls for the camera icon and replace it with the following:

<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle-o fa-stack-2x”></i>
<i class=”fa fa-apple fa-stack-1x”></i>
</span>

Now you have the Apple logo inside a circle, and it can be made clickable or kept purely decorative.

One final benefit to Font Awesome is the built in animation feature. This is used mostly for the loading icons, but with a little imagination it can be implemented almost anywhere. To utilize this cool feature, you simply have to add either “fa-spin” or “fa-pulse” to your icon’s class. “fa-spin” will cause the icon to endlessly rotate, while “fa-pulse” will rotate with 8 separate steps. To check it out, delete the apple logo we just stacked, and add the necessary code to call the icon “fa-spin” twice- once to make it spin and once to see it pulse.

If you’re having trouble, your finished code should look pretty close to this:

<i class="fa fa-spinner fa-spin fa-4x"></i>
<i class="fa fa-spinner fa-pulse fa-4x"></i>

The resulting effect is pretty cool looking, plus it doesn’t slow down the page’s loading time like alternative animation methods would.

ICOMOON

IcoMoon is available in both a free and premium version. In addition, IcoMoon provides an online app that allows you to curate your own selection of icons to download from over 3500 different options! We’re going to be working with the free pack already curated for us, but be sure to keep the huge icon repository in mind for any future projects. You can also import your own icons to create your own icon font if you really want to customize things. Follow this link and download the free version of the default pack:

https://icomoon.io/#icons-icomoon

Despite being a free pack, the download gives you 450 icons in a myriad of different formats for any need you may ever have for icons. You even get individualized eps files for every single icon so you can edit them even further in your choice of graphics program. Most importantly for us, however, is the font format of IcoMoon and it’s accompanying HTML file reference page.

What You Have to Know to Use IcoMoon

Since IcoMoon is downloaded as an actual icon font, you have to make sure your document links to the correct folder to use it. You can do this by adding the following code in the same place you’d link to any other font.

@font-face {
font-family: ‘icomoon’;
src: url(‘Font/IcoMoon-Free.ttf’)
}

However, lucky for you, the font comes with its own stylesheet inside the demo-files folder. So go ahead and open that up and take a look at the code. Make sure you link to the new stylesheet from your original html document.

Let’s call some icons.

Like Font Awesome, Icomoon requires you to place it inside a span element. In addition to the required span element, you also have to assign a class so IcoMoon knows which icon to call. You can find the names of each icon in the reference.html document that downloaded with the font. Directly under the place where the css document calls the font, you will see a span class already created named icon. Go check that out and try to call an icon in your document.

If you’re having trouble, first be sure you deleted the line calling for the FontAwesome stylesheet. If you’re still having trouble, this is what your code should look like to call the pencil icon:

<span class="icon icon-pencil"></span>

These icons can be manipulated in the same ways as FontAwesome, so basically you’re limited only by your imagination.