While working on an upcoming project in Ruby on Rails the other day, I ran across a problem that I have never really encountered before. I wanted to use FontAwesome icons, but instead of adding them to the HTML as I usually do, I had a specific reason why I needed them actually inserted via CSS instead. This was because I needed to take advantage of the css :before command, and so therefore HTML wasn’t the answer.

The problem?

Well the reason that this doesn’t work right out of the box is because FontAwesome is actually… yes you guessed it… IT’S A FONT! (Hence the name, if you haven’t caught on quite yet).

Well you might be familiar with doing something like this if you’re using .svg files:

.class:before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    background: url('images/home-icon.svg') no-repeat 0 0;
}

Here we are using the background property to load an “image” into the space and placing it before our selector element. This is a good way to accomplish this if you have images or svg icons to work with.

But I am using FontAwesome! What do I do?

Haha, I know. You want to know how to do this if you DON’T have an .svg icon. That’s why you made it this far isn’t it? Well I won’t hold out any longer.

The secret is to remember that it’s simply a font. This means to insert a Font Awesome icon via CSS, all you need to do is insert it like text. Then you can manipulate it with font attributes like font-size or line-heightor color.

Here is an example:

.class:before {
    position: absolute;
    content: 'f015';
    font-size: 20px;
    font-family: "FontAwesome";
}

As you can see, we simply input our icon into the “content” property. But wait? What is going on with the weird symbols? Well every icon in FontAwesome has a corresponding UTF-8 code and that is what you will need to input into there. But don’t worry I have all the icons for you in a nice little cheatsheet available here.

Once you have your icon, then you can simply style it as needed with your traditional font styling properties. So to change the size you use font-size or to change the color you use color. Simple enough. Of course you can add margin and padding as well. It’s all up to you.

I am apparently not the first person to have this problem, there is a high ranking Stack Overflow post titled “Use Font Icons in CSS” where they discuss the exact same problem. The solution is exactly as I outlined above, but I sought to make it simpler, as I feel like the Stack Overflow post is confusing.