Pinterest Stumbleupon Whatsapp
Advertisement

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 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer CSS is the single most important change webpages have seen in the last decade, and it paved the way for the separation of style and content. In the modern way, XHTML defines the semantic structure... Read More . 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="http://twistedgourmet.ca/?tv=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.

Advertisement

The most important line is the following:

<link rel="stylesheet" type="text/css" href="http://twistedgourmet.ca/?tv=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 The Next Steps On The Road To Becoming A CSS Jedi Master The Next Steps On The Road To Becoming A CSS Jedi Master CSS is absolutely one of the most important technologies around on the Internet today, and while most people admit to knowing a little HTML, we are generally clueless about CSS. Last time I introduced you... Read More 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 11 CSS Template Sites: Don't Start From Scratch! 11 CSS Template Sites: Don't Start From Scratch! There are thousands of free CSS templates available online, all embracing modern design trends and technologies. You can use them in their original form, or customize them to make them your own. Read More , or these YouTube channels to get started Want to Learn Web Design? 7 YouTube Channels to Get You Started Want to Learn Web Design? 7 YouTube Channels to Get You Started YouTube has thousands of videos and channels for web design beginners. Here we look at some of the best ones for getting started. Read More with web design.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Dane Knight
    June 19, 2017 at 5:05 pm

    For *everyone* to enjoy the web, it would be a sparse web indeed, since "everyone" will never agree on what's best, what's acceptable, and what doesn't offend. For every innovation, there will be some people who can't make use of it, but that's no reason for the very few to demand that we never move forward. A bit selfish on your part...

    • Chris
      June 21, 2017 at 6:43 am

      Heimen brings up a great point.

      I know the author is in the UK, but I'm sure that Elf & Safety would have a fit with this. In the USA, ADA/Section 508 (http://webaim.org/standards/508/checklist) compliance ranges in utility from "useful" to "saves companies from litigation."

      Font-awesome and friends are great (I use them on a box in the wild), but I would encourage you--and others--to go through your site or other sites with something like Lynx/Links and just get a feel for what it might "look" like to someone with JAWS or low-vision or the like.

    • Chris
      June 21, 2017 at 6:45 am

      In the USA, take a look at Section 508 compliance. If nothing else, following Heimen's advice could save your company from potential litigation.

  2. Heimen Stoffels
    June 18, 2017 at 2:06 pm

    Icon fonts are annoying for me as a user. I have slight dyslexia and just like people with more severe dyslexia, I'm using the Dyslexie font. But due to these new icon fonts, it often causes breakages because stuff disappears when you use a different font. So please, do away with those annoying icon fonts and let *everyone* enjoy the web (which is the whole point of the web, btw).

    • Chris
      June 21, 2017 at 6:47 am

      Yes.

      FA is great (I run this out in the wild on a box), but a web-developer needs to come behind and add tags.

      I wish everyone had to use Links/Lynx or JAWS for a day, just to get a good picture of how fantastically useless many sites are with low- or no-vision browsing.