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!

Hana

Creative Director

Website Design, Graphic Design & UX Optimization

Hana is the Creative Director of the Technology Aloha team. She 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.

Kona Office
75-5737 Kuakini Hwy, Suite 103
Kailua-Kona, HI 96740

Phone: (808) 626-5227

Bellingham Office
336 36th Street #131
Bellingham, WA 98225

Kona Office
75-5737 Kuakini Hwy, Suite 103
Kailua-Kona, HI 96740

Bellingham Office
336 36th Street #131
Bellingham, WA 98225

Phone: (808) 626-5227

Heap | Mobile and Web Analytics

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