Font Awesome for Divi Builder 2.3 released

Font Awesome for Divi Builder 2.3 released

The Font Awesome for Divi Builder plugin received an important update!!!

Font Awesome has changed their apporach in how the icon library can be included with a site – for good. Until now when a new version of the icon library was released you needed to paste a new code into the head of your site. Now this is over. There is one code (you can generate it here) which you never have to change again and you will always receive the latest and greatest of font icon.

Note: you will need to generate your own Font Awesome embed code here! It is not provided by The Divi Maganize.

This change has also been reflected in the Font Awesome for Divi Builder plugin. Activate it, enter the code received from Font Awesome and you are ready to go – for a loooooooong time. 🙂

Also a new feature of the plugin is a dashboard widget where you will receive news about any updates and news from The Divi Magazine.

Head over to the store to grab the new version, or just click this button below:

Font Awesome for Divi plugin now supports Extra and the Divi Builder!

The Font Awesome for Divi plugin has been updated! And what an update!!! Font Awesome for Divi Builder 2.2 supports not only the Divi theme, but also the Divi Builder plugin (with any theme) and the Extra theme as well!

(Yes, the plugin has been renamed to TDM: Font Awesome for Divi Builder, as the Divi Builder plugin is the core element of all three items.)

What else do you get with this version?

[Bugfix] No error messages are shown on frontend or backend after first plugin activation (when no data is saved yet)

[Bugfix] Styles are not loaded anymore when Font Awesome is disabled

[Feature] Styles can be loaded when other plugin is used to load Font Awesome

[Feature] You can keep the options when deleting the plugin

Where can I get the Font Awesome for Divi Builder 2.2 plugin?

Go and grab the plugin from the store for free, while stocks last! 🙂

(If you feel generous, you can invite me for a coffee here.)

How do I install the plugin?

Just like any other WordPress plugin.

Method 1: In your WP admin go to Plugins > Add New > Upload > Select the zip file and click the button.

Method 2: Unzip the zip file and copy the contents (including the parent directory) via ftp to your server under ‘wp-content/plugins’.

How do I upgrde from an older version?

Method 1: In your WP admin go to Plugins, delete the old plugin, then add the new plugin. Warning: your settings will not be saved! That feature comes in the new version.

Method 2. Upload the files to your server via ftp and simply override the old files. Your settings will be kept!

Where will I find the settings?

In your WP admin area, either under the menu ‘Divi’ or ‘Extra’, depending on the theme you use. For the Divi Builder plugin it is also under the menu ‘Divi’.

Do you have other information on Font Awesome and Divi?

Yes, here is the list of posts that have to do with Font Awesome and Divi:

Enjoy!

More Font Awesome icons in a blurb

To follow up last weeks post about using Font Awesome icons for a blurb instead of the built in Elegant Font icons, and as promised, here is what you can do to make it easier, faster and using less code and clicking to use them in blurbs all over your site.

Note 1: This post is not about using more than 1 icon in one blurb! Why would you anyway, right? 🙂

Note 2, to set the expectations: This solution needs some very minor technical experience (basically search and copy-paste). The solution IS simple, however it does not provide a super-simple click-and-drag-and-it-works solution. (I’m thinking about one, but it’s a tad bit difficult.)

(more…)

How to replace the blurb icon with Font Awesome

Last week I received a help request from John. He was trying to replace the blurb icon from it’s original Elegant Font to a Font Awesome icon. He did some pre-work, so half the credits go to him. Only some tricky finishing touches were needed.

I thought that other Divi users would be interested in this, so here it comes. Click to see how you can do it yourself. It requires adding some CSS to your style sheet and maybe playing around with it a bit for proper adjusments.

First, of course, you need to have Font Awesome loaded. You can easily do that with the Font Awesome for Divi Builder plugin, which you can grab here. Then follow the steps below.

!

1. Set up a blurb

Just set up a blurb with any icon. We’ll replace the icon later with some CSS.

If you want a circle or circle border, set those up the way you want it.

Give the blurb a custom CSS class name. (Open your Blurb Settings, go to the Custom CSS tab, and add the class name in the CSS Class field.) It should be different that the Font Awesome class names, e.g. don’t use fa-plane. But you can use fab-plane.

Q

2. Hide the icon

In the Blurb Module Settings panel go to Advanced Design Settings.

Switch on ‘Use Icon Font Size’ and set it to 0.

fab-blurb-settings

Now you will need to edit your style.css file, so go to Appearance > Editor. It should automatically load your styles.css

Add these lines to it, with your settings. Read the notes below.

.fab-plane .et-pb-icon::after {
    content: "\f072";
    font-family: "FontAwesome" !important;
    font-size: 48px;
    padding: 6px; /* OPTIONAL, READ NOTES */
}

 

i

Notes

The .fab-plane should be the css class name you gave your blurb.

The content should be the unicode from the Font Awesome page, e.g. “\f002” for the magnifying glass in the example. Don’t forget the quotation marks and the backslash!

You will most probably need to adjust the font-size of the icon. An out-of-the-box Divi uses 48px for the icon on top and 16px for the icon on the left. You can of course use different values if you want to.

The padding is optional. 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. If you don’t need any padding, then just remove the line.

If you did the above 4 steps, then you should have your blurb ready with a Font Awesome icon.

If you have more blurbs, then you need to do this for every one of them. Or do you? 🙂

In my next post I will be giving you some tips on how to minimize / simplify the CSS code if you are using more blurbs with Font Awesome. If you want to be ready for that, then give all your Blurbs an extra CSS class name called ‘fab’. 😉

If you have questions or you need some help, feel free to leave a comment, maybe it will help somebody else too.

Happy Blurbing!

Using Font Awesome with Divi

Using Font Awesome with Divi

Divi includes a very nice icon set, the Elegant Icon Font. It has a stunning 360 icons, however that was not good enough for me. 🙂 So I checked around a bit.

There are couple of free icon font sets on the web. My personal favourite is Font Awesome, which I believe is becoming the non-plus-ultra in this area and it’s totally free! The collection (version 4.3.0) currently packs 519 amazing icons for different categories like web applications, gender icons, file types, and so on. Even some Star Wars related ones!!! Click to see how to integrate it in your Divi powered WordPress site and get some tips on formatting.

(more…)

css.php