How to Use Font Awesome on a WordPress Website

February 11, 2019

Using fun icons on your website is pretty great, right?

A well-placed icon can spice up a boring webpage, add visual cues as to what your content is about, and provide a cohesive element across the entire site.

If you’re looking for a good set of icons to use online, Font Awesome is a great resource! They offer a huge set of free icons that can be used on your website as well as in your desktop apps — and are fully customizable and scalable to any size.

Here’s how to get started with using Font Awesome icons on your WordPress website.

How to Use Font Awesome on a WordPress Website

#1. Set up Font Awesome to run on your website

The first thing you’ll need to do is set up your site to be able to ‘connect’ to Font Awesome. You’ll need to copy a line of code which ‘calls’ the Font Awesome icon set, and paste it into the <head> of each page where you want to use Font Awesome.

To find the current Font Awesome code, go to the Font Awesome Getting Started page.

Copy the code there, and then add it to the <head> of each page.

On your WordPress website, there may be a place in your Theme Options where you can add code to the <head> of your pages. If your theme does not offer this as an option, there are other ways to add code to a WordPress header and footer.

Example of How to Use Font Awesome on a WordPress Website

#2. Start Adding Font Awesome Icons to your Website

Now that you’re all set up, you can start using the icons!

To use an icon, you’ll add a snippet of HTML to your text. If you’re using the WordPress Page Editor, switch over to the “Text” editor tab instead of the “Visual” editor. You’ll be pasting the HTML code for the icon into the Text Editor.

Now pick out your favorite icon! You can find all the free icons on the Font Awesome Cheatsheet.

To reference a particular icon, you’re going to need two pieces of information which you can find on the cheatsheet:

  1. The icon name — e.g. umbrella
  2. The style of the icon — solid, regular, or brands

 

Once you’ve found the icon you want, use the following code to add it to your text:

<i class=”fas fa-umbrella”></i>

 

How to Use Font Awesome on a WordPress Website

You’ll need to update 2 pieces of information in the above example.

  1. Update the icon name where it says umbrella.
  2. Update the style prefix of the icon where it says fas. The style prefix for solid icons is fas, for regular icons is far, and for brands is fab.

 

So for example, if you wanted to use the Instagram icon, you would determine the name and style — instagram and brand — and update the name and style prefix (which would be fab in this case) accordingly.

<i class=”fab fa-instagram”></i>

You can find more detailed information on how to reference Font Awesome icons here.

#3. Customize the Icon to your Heart’s Content

Now that you have added the icon to your page, you can go bananas with the styling!

By default, the icon will automatically inherit the size and color of the surrounding text. However, you can also adjust the size, color, rotation, and more.

The simplest way to change the icon style is to add a <style> tag within the <i> tag, and add any style attributes that you would like.

For example:

<i class=”fas fa-umbrella” style=”font-size: 30px; color: Purple;”></i>

 

There are also several built-in styling classes for Font Awesome, which can be added into the code for the icon.

To adjust the relative size of the icon, add the size class into the icon code.

For example:

<i class=”fas fa-umbrella fa-2x”></i>
<i class=”fas fa-umbrella fa-4x”></i>

This will make the icon twice or four times as large as the font-size of the surrounding text.

 

You can also rotate the icon by adding the fa-rotate class.

For example:

<i class=”fas fa-umbrella fa-rotate-180″></i>

 

Now have fun spicing up your website with some icons!

You might also enjoy...

How to Choose a Web Design Agency

How to Choose a Web Design Agency

Choosing the right web designer is vital for your business. This comprehensive guide will tell you how to choose a web design agency that's right for you. There are almost 2 billion websites on the net. And as if that were not enough pressure, the average user spends...

read more

Hana

Contributor

Former Creative Director

Hana focuses on website design, graphic design and email marketing for Technology Aloha and our clients.

Want to learn more about our Website Design Services?

We love building websites, whether large or small—from one-page basics, to online stores. Learn more about how we can help your business succeed.

Enjoying this article?

Join our email list to receive the latest news and tips about internet marketing, straight to your inbox.

Mahalo for subscribing!

Share This