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.
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:
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:
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> |
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.
4 Comments
Hi, thanks for this great article about Fontawesome manual installation. I still have a doubt. What happens concerning multiple F.A. versions used by third plugins or even updating website’s F.A. code and visual consistency ? What is the best practice here ?
Regards.
May 22, 2018
I had formed to leave a comment, man do I have a difficult time writing
a blog. Im aiming to kick start one on my website and I must say
its challenging at all. I really do admire people like yourself who are
able to reveal anything easily. Keep up the nice work!
July 30, 2018
Excellent article, I need to truly enhance the content I have.
I have attempted to blog on third part platforms, it did
just
not transpire the real way I needed it to. But your website has
providing me a desire to achieve this. I will be bookmarking your
website
and checking it out from time to time. Thank you!
December 16, 2018
You have very good stuff. Thanks
March 24, 2019