How To Create Font Icons

Font AwesomeThe wonderful font icon set, Font Awesome has been included in Kolakube themes.

This means you can add useful icons anywhere on your site with a simple piece of HTML code.

And what’s best is that they can be easily styled with CSS, to make them more unique and match your site better.

While there is thorough documentation available at the Font Awesome site, I’m going to show you step-by-step how to implement icons into your website.

The Cheatsheet

The Font Awesome Cheatsheet is your new best friend. Bookmark it, keep it safe somewhere, guard the link with your life — it is a full list of the icons included in the set, with the codes you need to use to display icons.

So the first step to adding an icon is to find the icon you want from this list. Once you find it, take note of the icon CSS class, as highlighted in the screenshot below:

Font Awesome Cheatsheet

For this example, I picked the heart icon, and its CSS class is fa-heart.

Once you have the icon class name, you can apply it to an HTML tag, like so:

<i class="fa fa-heart"></i>

Keep in mind, we also need to add the fa class to that HTML element as well.

Pasting that, or any HTML snippet with any icon’s respected class name will output an icon.

And that’s it! Use that code anywhere you want to display an icon. In your nav menu, in your posts, sidebar widgets — anywhere that accepts HTML!

Customizing Icons

If you want to trick your icons out even further, you can write CSS to adjust colors, font sizes and more.

First off, modify the code above by adding your own custom class:

<i class="fa fa-heart fa-custom-icon"></i>

Then, in your child theme’s style.css file, you can write CSS to tweak it. The code below will change the color, font size and add a background color + padding to my icon:

.fa-custom-icon {
     background-color: #eee;
     color: #ae2525;
     font-size: 24px;
     padding: 5px;
}

Go crazy, you can manipulate these icons to look pretty much any way you want. And again, don’t forget to check out the Font Awesome Examples page to see what else you can do with these icons.