Font Awesome for Divi Builder 2.4 become pretty popular and lot of the users also use Font Awesome icons in Blurb modules.
Not long ago Font Awesome 5 came out, and there are people who want to switch over. So here is a guide on how you can switch over to FA5 icons easily if you are using FA icons in Blurbs and if you are using the FA Icons for Divi Builder plugin.
This guide has three parts after the initial Step 0:
Part 1: Guide if you want to move from v4.7 to v5 without the use of the Brands icon set
Part 2: Guide if you want to move from v4.7 to v5 with the use of the Brands icon set (jump to part 2)
Intermezzo: Slowly transitioning from no-Brands to with-Brands
Part 3: Guide if you are just starting to use v5 (jump to part 3)
Note: for the steps explained in this guide you will need the FA Icons for Divi Builder plugin (which you can get now for $1 until the end of March with the coupon code FA5ONE.)
Parts 1 and 2 of this guide assume that you are already using either Font Awesome for Divi Builder 2.4 or FA Icons for Divi Builder with Font Awesome 4.7 enabled, and you’ve done the setup as described in this article.
Step 0 – Upgrade
If you haven’t done so, update to FA Icons for Divi Builder and enable it with FA 4.7. If you are just getting started, then start with point 3 of this list. 🙂
The upgrade is fairly easy.
- Go to Divi > Font Awesome, enable the option to keep your settings, and save your settings. (top screenshot)
- Deactivate TDM: Font Awesome for Divi Builder and then delete it
- Install FA Icons for Divi Builder and activate it
- Go to Divi > Font Awesome and enable it with Font Awesome 4 (bottom screenshot)
- Add your Font Awesome 4 embed code in case it’s not there
- Save your settings
Part 1
Moving from Font Awesome 4.7 to 5.x
without using the ‘Brands’ icon set
Step 1 – Adjust the CSS code
You will need to adjust two lines and add one line to the existing code.
This is how your code started before:
.fab .et-pb-icon { font-size: 0; }
.fab .et-pb-icon::after { font-family: "FontAwesome" !important; }
This is how it should be modified:
.fab .et-pb-icon { font-size: 0; font-weight: 900; }
.fab .et-pb-icon::after { font-family: "FontAwesome", "Font Awesome 5 Free" !important; }
.fab p { line-height: 1.7em; }
The general (Solid) icons in FA5 need the font-weight, otherwise they will not show.
Then we are adding version 5 to the font family.
And since this is not the cleanest solution, we need to adjust the line height of the paragraphs. You might need to use a different value here, depending on your current setup.
(For the clean solution check part 2.)
Step 2 – Change Font Awesome version
- Go to your Font Awesome settings under Divi > Font Awesome.
- From the Enable Font Awesome dropdown choose the one that says ‘Font Awesome 5 – Web Fonts with CSS’
- Enable Load only certain styles
- Disable Brands
- Save the settings
And you should be all set.
Font Awesome 5 works a bit differently than the previous version. They have introduced new icon packs and CSS classes, one of them being ‘fab’ for Brand icons, which is also used by the original code of this tutorial. That’s a conflict which can be resolved by disabling Brand icons.
Part 2
Moving from Font Awesome 4.7 to 5.x
with using the ‘Brands’ icon set
Step 1 – Adjust the CSS code
In case you skipped part 1: in Font Awesome 5 they introduced different icon styles and packs which use new CSS classes. One of the packs is ‘Brands’ which uses the class ‘fab’ . This was also used by the original code of this tutorial. That’s a conflict which needs to be resolved if you want to use Brands. Unfortunately the only way doing it is to rename our class.
So all the ‘.fab’ needs to be renamed from the original code to something else. And we need to add some new code. So the new CSS snippet should look something like this:
.fadb .et-pb-icon { font-size: 0; font-weight: 900; }
.fadb .et-pb-icon::after { font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; }
.fadb.et_pb_blurb_position_top .et-pb-icon::after { font-size: 48px; }
.fadb.et_pb_blurb_position_left .et-pb-icon::after { font-size: 16px; }
.fadb-beer .et-pb-icon::after { content: "\f0fc"; }
.fadb-search .et-pb-icon::after { content: "\f002"; font-size: 32px; /* font size optional, see below */ }
.fadb-plane .et-pb-icon::after { content: "\f072"; padding: 6px; margin: 0 -6px; /* padding optional, see below */ }
If you have been using Font Awesome for Divi before then you should be familiar with what the above does. In case you’d still like an explanation you can find it in part 3, CSS explained.
Step 2 – Change the class names in your blurbs
This is the painful part, if you have a lot of blurbs. You need to go to every single one of them and change the class names from ‘fab fab-beer’ to ‘fadb fadb-beer’, or whatever you icon is.
Step 3 – Change Font Awesome version
- Go to your Font Awesome settings under Divi > Font Awesome.
- From the Enable Font Awesome dropdown choose the one that says ‘Font Awesome 5 – Web Fonts with CSS’
- Enable Load only certain styles
- Disable Brands
- Save the settings
And you should be all set.
Note: this setup doesn’t work with the SVG with JavaScript version, only with the Web Fonts one. For the SVG version you need to have a different setup. Read on.
Intermezzo
Slowly transitioning from no-Brands to with-Brands
Changing the classes in all blurbs can take substantial time, which might discourage you, nonetheless you still want to use the Brands icon set. So what can you do?
Actually there is an easy solution.
Make sure you have both versions of the CSS code in place, with all your icons, that means the old version with “fab” class names and the new version with “fadb” class names.
Code in transition
/* Old code without Brands icon set */
.fab .et-pb-icon { font-size: 0; font-weight: 900; }
.fab .et-pb-icon::after { font-family: "FontAwesome", "Font Awesome 5 Free" !important; }
.fab.et_pb_blurb_position_top .et-pb-icon::after { font-size: 48px; }
.fab.et_pb_blurb_position_left .et-pb-icon::after { font-size: 16px; }
/* AND YOUR ICONS ... */
/* New code with Brands icon set */
.fadb .et-pb-icon { font-size: 0; font-weight: 900; }
.fadb .et-pb-icon::after { font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; }
.fadb.et_pb_blurb_position_top .et-pb-icon::after { font-size: 48px;
.fadb.et_pb_blurb_position_left .et-pb-icon::after { font-size: 16px; }
/* AND YOUR ICONS ... */Make sure you have ‘Brands’ disabled in the plugin settings, until you finish.
Start changing the class names in the Blurbs to “fadb”. Since you have both code versions all of the icons will still show up during transition. You can take your time changing them.
Once you have changed all the class names in the Blurbs you can switch on the Brands icon set and delete the old version of the code.
Of course, it is always recommended to create a backup of your site before making any major changes.
Part 3
Starting up with Font Awesome 5.x
and FA Icons for Divi Bulder
So you have the plugin already installed and activated. Good.
Enable it and select the version you want to use: Font Awesome 4 or Font Awesome 5 – Web Fonts with CSS.
A note before we dive in: if you want to use Font Awesome icons in Blurb modules instead of the built-in icons, then you will need to use the ‘Web Fonts with CSS’ version. The ‘SVG with JavaScript’ is tricky and too difficult to use as Blurb icons.
Step 1 – Check the unicode code for the icon(s) you want to use
Go to the Font Awesome icons page, and for each icon you want to use, check and note down the unicode code. For the beermug is “f0fc”. You can see it just below the icon name.
Step 2 – Add CSS
You will need to add the below CSS snippet to your theme. You can do that at several places:
- Appearance > Editor, which should open your style.css for editing by default, OR
- open Appearance > Customize and add it to the ‘Additional CSS’ part, OR
- go to Divi > Theme Options > General tab > Custom CSS box, OR
- you might have a plugin that allows you to add custom CSS somehow
.fadb .et-pb-icon { font-size: 0; font-weight: 900; }
.fadb .et-pb-icon::after { font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 5 Pro" !important; }
.fadb.et_pb_blurb_position_top .et-pb-icon::after { font-size: 48px; }
.fadb.et_pb_blurb_position_left .et-pb-icon::after { font-size: 16px; }
.fadb-beer .et-pb-icon::after { content: "\f0fc"; }
.fadb-search .et-pb-icon::after { content: "\f002"; font-size: 32px; /* font size optional, see below */ }
.fadb-plane .et-pb-icon::after { content: "\f072"; padding: 6px; margin: 0 -6px; /* padding optional, see below */ }
CSS explained
(I put this here again, so you don’t need to jump up and down in the article.)
The 1st line sets the size of the original icon to zero, so it becomes invisible. The ‘Solid’ Font Awesome 5 icons – these are the ones that are free – use a font weight of 900, so we need to set that too.
The 2nd line sets Font Awesome as the default font for the icon used in the blurb. The three font families are for v4.7 (“FontAwesome”), 5.x Solid (“Font Awesome 5 Free”), 5.x Brands (“Font Awesome 5 Brands”), and 5.x Pro icons (“Font Awesome 5 Pro”) respectively. (Only in the blurbs where fadb is used as CSS class. If you don’t put there fadb then the icon will not be rendered.)
Note: You don’t need to include all font families, only the ones that you are using.
Note 2: If you are using the Pro CDN of Font Awesome 5, then you will need the “Font Awesome 5 Pro” font family, even for the free solid icons.
The 3rd and 4th line sets the font sizes used for the icons (icon on top, icon on left). These are the default Divi values as well. You might need to adjust these based on the font size adjustments you have done to your page. Note: this is for all the blurbs that use Font Awesome. If you want to set the font size separately for a blurb, then you need to set that in the appropriate line.
The 5th line (and onwards) sets up the proper icon for the blurb. This is where you need to paste in the unicode code. Don’t forget the quotations marks and the backslash before!!!
The 6th and 7th line is only an example if you want to use a different size for the icon than the default defined above.
The 7th line: some icons are not square, for example the plane icon. In these cases the circle around the icon will be an oval. This can be fixed by setting a padding of a couple of pixels, or a margin of a couple of negative pixels. You might need to experiment with this.
Step 3 – Add custom class names to your blurbs
Open the setting of the blurb and 1) enable Use icon, 2) select any icon. Set up the rest (icon color, circle and border, icon placement, animation) as you want.
To the CSS CLASS field add two values: fadb and the unique class name for your blurb. For easy working I usually use the Font Awesome class name as a base, so if I want a beer mug, then instead of fa-beer I would use fadb-beer.
And we’re done. 🙂
Remember, you can now get the FA Icons for Divi Builder plugin for $1 until the end of March with the coupon code FA5ONE.
Let me know what you think or if you have any questions.
And be so kind to share. Thanks!
Hi! Thanks for the article!!! Do I really need to use the plugin? I was able to add the old font awesome CDN 4.7 to the head section by following the instructions by going to Divi → Theme Options → Integration and scrolled down a bit and find the Add code to the of your blog box. (As found in https://www.elegantthemes.com/blog/tips-tricks/font-awesome-wordpress) combined with your old article (https://divi-magazine.com/more-font-awesome-icons-in-a-blurb/). Therefore, if I add the Font Awesome 5 CDN to the head section instead of using your plugin, will it work?
Hi Kiki,
Yes, it will work without the plugin if you just add the code on the Integration page. You will not get the style settings automatically though.
Also you might bump into issues with TinyMCE when adding icons in the text. I wasn’t able to figure out what causes that and how it can be easily offset.
Cheers,
Andras
Oh yeah, so TinyMCE was causing problems…. I couldn’t figure out why the icon has blank rectangle when I tried to add font awesome 5 CDN to Integration page. You can ask Font Awesome 5 support team.
Actually that’s a bit different thing which I forgot to say. You can just paste the code on the Integration page and the icons will shop up on the front-end. If you use the plugin, then you will also see the icons in the TinyMCE editor.
The issue I was mentioning before is that TinyMCE sometimes removes some tags, so your might be removed on page update. There’s a setting in the plugin which helps to circumvent that.
Hey, thanks so much for the awesome article! I have it all working on blurbs but I was wondering how I might implement the Pro version of Font Awesome? I have a few icons I want to use from the Pro version and was wondering how I go about doing this?
Hi Jen,
This is such a great question, I’m really glad you asked.
I do plan to support Font Awesome 5 Pro once the CDN for it will be available, and if it can be implemented. That still depends on technicalities and licensing questions. But for sure if you will want to use Pro features you yourself will need to have a Pro license at Font Awesome.
As for now, if you would like to use Font Awesome Pro icons, you will need first of all a FA Pro license. Then you need to download the whole FA 5 Pro package and upload it to your website, so that the icons can be served locally. You can find the instructions on this page: https://fontawesome.com/get-started
And I just saw that FA 5 Pro CDN Beta is already available. I guess I will need to get to work then. 🙂
So you can use that as well, instructions are on the same page. Log in to your Font Awesome account, go to ‘Get Started’, add the domain where you want to use it, and copy some lines into the head of your theme. (Screenshot: https://cloudup.com/cKmGGh509Rk) You can do that easily under Divi > Theme Options > Integration > Add code to the < head >”
I guess I will update the plugin soon to enable support for FA 5 Pro. 🙂
i have added “fadb fadb-anchor” in CSS Class within Blurb settings;
i also added the following code (mentioned below) in the following places:
1) Appearance > Editor > style.css
2) Appearance > Customize > Additional CSS 3) Divi > Theme Options > General tab > Custom CSS box
====
.fadb .et-pb-icon { font-size: 0; font-weight: 900; }
.fadb .et-pb-icon::after { font-family: “FontAwesome”, “Font Awesome 5 Free” !important; }
.fadb.et_pb_blurb_position_top .et-pb-icon::after { font-size: 48px; }
.fadb.et_pb_blurb_position_left .et-pb-icon::after { font-size: 16px; }
.fadb-anchor .et-pb-icon::after { content: “\f13d”; }
====
but all the above steps is not working 🙁 the only way that works for me is “fas fa-anchor” in the CSS Class of the individual Blurb
Hi Bryan,
I’m sorry for the late reply, your comment flew below the radar.
First, you only need to add the CSS code to one place. Adding it to all three places will just create code duplication / triplication.
Not sure what could be the issue. If you can set up a test page having a blurb set up according to the instructions on the page, and you can share that with me I’m happy to take a look.
This works to a point but when I select an icon, it still shows the icon I selected as the default Divi icon right next to the FA5 icon. So this is not working. I tried enabling the icon only and NOT selecting an icon but then nothing shows up.
Please…How do I fix this??
Hey Brett, can you share a URL to the page where this is happening? I’d be happy to take a look.
Hey, I got this to work as mentioned in the article for the first blurb. Thanks for the same. But when i added the second blurb the image icon did not come up.
I added the below code in the Divi -> Custom CSS
.fab .fadb .et-pb-icon { font-size: 0; font-weight: 900; }
.fadb .et-pb-icon::after { font-family: “FontAwesome”, “Font Awesome 5 Free”, “Font Awesome 5 Brands”, “Font Awesome 5 Pro” !important; }
.fadb.et_pb_blurb_position_top .et-pb-icon::after { font-size: 48px; }
.fadb.et_pb_blurb_position_left .et-pb-icon::after { font-size: 16px; }
.fadb-med .et-pb-icon::after { content: “\f0f0”; }
.fadb-brief .et-pb-icon::after { content: “\f469”; }
Post that created the first blurb and set the class as fadb fadb-med this worked.
The second one when i added and set the class as fadb fadb-brief this did not show up.
Did I miss something ?
I did notice something, even if I add the same class for the new blurb this does not work. Its weird.
If we use your plugin do we still need to use the CSS on this page? If so what’s the point of the plugin? I don’t see a way to add a FA icon to a Divi blurb even with the plugin activated….
Some people are uncomfortable adding code to their website / theme. This plugin helps with that step.
Sorry, there is no option to choose FA icons in the Blurb panel, as it is stated with bold on the product page.
I’m using this but as others have noted after the first icon I’m getting a square for the other blurbs using FA. Can you please advise?
Can you share with me a URL where this can be seen?
A.