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.
#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.
#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:
- The icon name — e.g. umbrella
- 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>
You’ll need to update 2 pieces of information in the above example.
- Update the icon name where it says umbrella.
- 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!
