Adding Font Awesome Icons

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

There are a few ways you can add Font Awesome fonts to your website. I’ll quickly explain them and then show you how to do it the easy way. Whether the easy way is the right or wrong way could be argued. For 90% of websites, I think the easy way is just fine.

There are plenty of free Font Awesome plugins that will load the icons onto your site. I personally don’t like to use plugins for extremely easy tasks like this. For one I don’t like the idea of my site bloated with lots of plugins. And for another, every plugin I download means another plugin I have to update.

Having said that 🙂 I have to use this opportunity to promote my own plugin that not only installs Font Awesome to your site, but also makes them available in the blurb module along with several new animations like spin, bounce, etc. If you simply want to add the icons for reasons other than using them in the blurb modules, you should continue reading and skip my plugin. If you want Font Awesome icons available in blurbs, you should stop reading and check out my plugin!!!!!

Interested in the entire Font Awesome collection of icons available in the blurb module? Introducing:

Advanced Blurbs

The next easiest option is to import the icons into your stylesheet using a single line of code. This is probably a good enough option for most websites. The import is done through a CDN and is very fast and usually already cached in users’ browsers, so it does not add any load time to your site. This is the method we’ll be using.

Another option would be to upload the icons to your website so they are served locally. This means downloading the files, uploading them to your web server, and then referencing them in your <head>. This is overkill for most sites but I would be happy to add the instructions if anyone asks for it in the comments below.

Adding Font Awesome to Divi

You might be disappointed that the intro to this tweak is longer than the tweak itself. Log into your site and click on Divi->Theme Options in the WordPress dashboard (ePanel for older versions of Divi). Click on the Integration tab at the top of the Divi Theme Options screen. Paste the following code in the “ADD CODE TO THE < HEAD > OF YOUR BLOG” text area:

Click the Save Changes button and you’re done. This will add Font Awesome to the <head> of your website. The URL above could change so you should probably get it from Font Awesome’s website directly.

If you’re not sure about how to add the icons to your web pages, you can view some examples here. Just make sure you are in text mode in the WordPress editor when applying these examples to your page.

Post a Reply

Your email address will not be published. Required fields are marked *