You've heard of icons, and you've almost certainly heard of fonts, but what is an Icon Font? Today I'll show you what icon fonts are, and how you can use them to liven up your website. Let's get started.

What Are Icon Fonts?

Icon fonts are exactly the same as "regular" fonts -- they define the look and feel of a piece of text. The big difference here is that icon fonts don't contain letters and numbers, but symbols and icons. You may be confused by this, as what good is a font if you can't write letters to your mom!

Icon fonts are primarily used to style websites. As they are vector based, they can be resized, moved, styled, and altered using CSS. This provides a huge advantage over traditional design methods such as images. The look and feel of a large number of icons can be changed with just a few lines of code. You don't have to edit any images, open Photoshop, or upload the new files -- you just write code.

Getting Started

I'll be using Font Awesome for these examples, but the theory can be applied to many other font packs.

Here's the starter HTML:

        <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MUO Icon Fonts</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html {
font-family: helvetica, arial;
}
</style>
</head>
<body>

</body>
</html>

This is the minimum amount of HTML required to produce a webpage. I'll not be explaining the majority of it, as we've covered that in our guide on how to make a website.

The most important line is the following:

        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    

This loads the Font Awesome stylesheet from its CDN. Without this line, your website would not know what Font Awesome is, so it's quite important. This stylesheet handles all of the hard work of embedding web fonts, and generally makes things much easier for you.

Font Awesome icons are defined by CSS classes added to i tags. These were chosen as they do not have any browser or default defined styling attached to them, so your icons won't get all messed up. Alternatively, you can add the classes to span tags, but that does clutter up your HTML.

Here's the basic usage. Put this inside your body tags:

        <i class="fa fa-cog"></i> My First Icon
    

Here's what that looks like:

First Icon

How easy was that? Let's break it down. There are two classes needed for Font Awesome to work. The first is called fa, which stands for Font Awesome. This is needed for any icon, regardless of which one you use. The second class specifies the particular icon you wish to use -- this could be anything, a plane, a person, or credit card. This is also prefixed with fa, and as this is a cog icon, its name is fa-cog. You can view a list of all the icons in Font Awesome on their website.

Try changing the icon from the cog to any other one.

Going Deeper

Once you know the basics, it's time for some advanced tricks.

If you don't want to write your own CSS, you can use the styles built right into Font Awesome. There are many classes you can use to make icons bigger:

        <i class="fa fa-battery-0 fa-lg"></i>
<i class="fa fa-battery-1 fa-2x"></i>
<i class="fa fa-battery-2 fa-3x"></i>
<i class="fa fa-battery-3 fa-4x"></i>
<i class="fa fa-battery-4 fa-5x"></i>
Sized Icons

Another useful class to use is the fa-spin. This will make you icons rotate, and when combined with the previous size classes, you can produce some nice effects. Here's the code:

        <i class="fa fa-refresh fa-spin fa-3x"></i>
    

Here's the result:

Spinning Icon

It's easy to rotate icons -- use the fa-rotate class:

        <i class="fa fa-envelope-o fa-3x"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-90"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-180"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-270"></i>

The number at the end defines the degrees of rotation for the icon, but don't get carried away. You're limited to 90, 180, or 270.

Icons Rotated

One final trick you can do is stacking. The fa-stack class lets you combine two or more icons together. Here's the code:

        <span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-eyedropper fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-cutlery fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-glass fa-stack-1x"></i>
</span>

Here's what that looks like:

Icons Stacked

Once you begin combining all of these various classes, the possibilities really are endless.

Custom CSS

Because icon fonts are just fonts, you can style them with CSS just like you would any other element. Using a little CSS3 can go a long way:

Icon Animation

Here's the HTML for that icon:

        <i class="fa fa-motorcycle fa-5x bike"></i>
    

Here's the CSS:

        @keyframes move {
  from { margin-left: 0; }
  to { margin-left: 400px; }
}

.bike {
  animation-name: move;
  animation-duration: 4s;
}

This CSS is quite basic, but it has a large impact. This isn't a CSS tutorial though, so you may want to learn CSS if you want to know more about the inner workings.

You can do some special things if you really want to:

Icon Animation

This stutters a little bit in order to reduce the file size for the web. Here's the HTML:

        <i class="fa fa-user-circle person fa-5x" id="p1"></i>
<i class="fa fa-user-circle person fa-5x" id="p2"></i>
<i class="fa fa-user-circle person fa-5x" id="p3"></i>
<i class="fa fa-user-circle person fa-5x" id="p4"></i>

Here's the CSS:

        @keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.person {
  opacity: 0;
  animation-name: fade;
}

#p1 {
  color: red;
  animation-duration: 2s;
}
#p2 {
  color: orange;
  animation-duration: 4s;
}
#p3 {
  color: green;
  animation-duration: 6s;
}
#p4 {
  animation-duration: 8s;
}

Like the previous example, this uses CSS3 animations. An animation called fade is created, and each person icon implements this animation with varying timing. There's a lot of potential to go wild with these icons and CSS3.

That's all for today. You should now be able to use Icon Fonts to liven up your website! If you're not so sure of your skills just yet, check out these CSS template sites, or these YouTube channels to get started with web design.

Did you learn anything new today? What's your favorite Icon Font? Let us know in the comments below!