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.)

Get it now!

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.

  1. Go to Divi > Font Awesome, enable the option to keep your settings, and save your settings. (top screenshot)
  2. Deactivate TDM: Font Awesome for Divi Builder and then delete it
  3. Install FA Icons for Divi Builder and activate it
  4. Go to Divi > Font Awesome and enable it with Font Awesome 4 (bottom screenshot)
  5. Add your Font Awesome 4 embed code in case it’s not there
  6. 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

 

  1. Go to your Font Awesome settings under Divi > Font Awesome.
  2. From the Enable Font Awesome dropdown choose the one that says ‘Font Awesome 5 – Web Fonts with CSS’
  3. Enable Load only certain styles
  4. Disable Brands
  5. 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

 

  1. Go to your Font Awesome settings under Divi > Font Awesome.
  2. From the Enable Font Awesome dropdown choose the one that says ‘Font Awesome 5 – Web Fonts with CSS’
  3. Enable Load only certain styles
  4. Disable Brands
  5. 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:

  1. Appearance > Editor, which should open your style.css for editing by default, OR
  2. open Appearance > Customize and add it to the ‘Additional CSS’ part, OR
  3. go to Divi > Theme Options > General tab > Custom CSS box, OR
  4. 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" !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, 5.x Solid and 5.x Brands respectively. (Only the blurbs where fadb is used as CSS class. If you don’t put there fadb then the icon will not be rendered.)

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!

css.php

If you liked this post ...

... then share it with your friends!