Please note, this article and instructions are for Font Awesome version 4.x.
For the instructions for Font Awesome 5 click here.
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.)
What do you need:
- You need to have Font Awesome ‘running’ on your site.
- You can do this easily with Font Awesome for Divi plugin, or
- Any other plugins out there, which embed Font Awesome into your site, or
- Enter one line of code into your style.css file
- Add custom class names to your blurbs
- Check the unicode code for the icon(s) you want to use
- Add some extra declarations to your style.css
Sounds easy, right? Because it is. Let’s go one-by-one, and I’m going to skip step one, I assume you already have Font Awesome running. (In case not, grab one of my plugins from the store for free.)
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.
What you don’t need to do is going to the Advanced Design Settings and enable USE ICON FONT SIZE, and set it to 0. That will be done by some CSS.
To the CSS CLASS field add two values: fab 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 fab-beer.
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 icons.
Add extra declarations to your style.css
Go to Appearance > Editor, which should open your style.css for editing by default, and add the following lines:
.fab .et-pb-icon { font-size: 0; }
.fab .et-pb-icon::after { font-family: "FontAwesome" !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; }
.fab-beer .et-pb-icon::after { content: "\f0fc"; }
.fab-search .et-pb-icon::after { content: "\f002"; font-size: 32px; /* font size optional, see below */ }
.fab-plane .et-pb-icon::after { content: "\f072"; padding: 6px; /* padding optional, see below */ }
CSS explained:
The 1st line sets the size of the original icon to zero, so it becomes invisible.
The 2nd line sets Font Awesome as the default font for the icon used in the blurb. (Only the blurbs where fab is uses as CSS class. If you don’t put there fab then the icon will not be rendered.)
The 3rd and 4th line sets the font sizes used for the new icons (icon on top, icon on left) to the default Divi values. 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 line shows 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, you might need to experiment with this.
Is it that easy?
Yes, indeed it is.
In case you have questions or need some help, then leave a comment below and I’ll be happy to answer.
Happy blurbing! 🙂
Hi!
What does this look like? A screen shot or an active example would be extremely helpful.
Hi Nick,
Fair question.
It looks exactly as it would look with the built in icons.
You can see some examples in the first post here:
http://www.divi-magazine.com/how-to-replace-the-blurb-icon-with-font-awesome/
Wonderful tutorial, worked like a charm. Say you wanted the background, border and font colors to change when hovered over. How would you add a hover state to the blurb image.
Hi Scott,
I need to look into that, I cannot say from the top of my head.
First intuition tells me, it needs to be done with javascript / jQuery, since more elements are involved.
Good idea, though. I cannot make any promises, but will try to look into it.
Thank you for this tutorial! Lots of steps, but I have it down for the first one so it should be easier from here!
I did notice in the module pop-up, that an error is displayed:
Warning: Illegal string offset ‘override_tinymce’ in /var/www/html/wp-content/plugins/tdm-fontawesome-for-divi/tdm-fontawesome-for-divi.php on line 90
It doesn’t seem to affect the posted page, but I don’t like to see errors like this. Any suggestions or updates that can be made to remove this error in the future?
Thanks again!
Hi Caroline,
The error might be because of the experimental setting to override TinyMCE. I think if you disable that option, then you should get rid of the error message.
Most probably I will remove that option in the future, I’m not sure it is needed / helps.
Some of the font awesome icons have a different spacing between the icon and the title of the blurb. How would decrease the amount of space between the icon and the title of the blurb?
Hey Doug,
Can you tell me which icon(s) is it? I’ll check it out can suggest a solution.
I’ve tried at least three different sets of instructions, and I’m having no luck. I’ve installed/activated FontAwesome for Divi, I’ve put in the emailed Embed Code under Font Awesome Options in the admin bar (the email only says to copy your code <script src etc., etc. and place it near the top of the HTML's which I don’t think I need). I’ve renamed the blurb CSS Class fab-money, I’ve put your CSS under Appearance>Editor (at the bottom, wasn’t sure), and renamed the values to suit my icon. What did I miss?
Hello Baker,
Thanks for reaching out and I’m really sorry about the issues with this. I’m more than happy to help out.
Could you share with me the URL of a page where you are having issues? I’ll take a look at the code there to see if there is anything amiss.
(If you would like, you can contact me directly at andras (at) divi-magazine (dot) com.)
Cheers
Hey there – great tutorial! I love finding new Divi resources, bookmarked your site immediately!
One speedbump I am having: I have only tried this for 1 icon, the plane. And it made my perfectly round blurb circle a vertical oval. Any way to make sure that the icon remains a perfect circle?
Here is the page it is found on, way toward the bottom under Case Studies: https://chuckbanker.mystagingwebsite.com/insights/
Hi Steve,
Thanks for the kind words, I’m happy you like the article.
Yeah, some icons are not fully square, that’s when you don’t get a circle. You can offset this with some padding, unfortunately that needs to be done manually.
The last paragraph in the “CSS Explained” section in the article describes just this:
“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, you might need to experiment with this.”
I hope this helps.
Cheers
Hi,
Your article helps me a lot, I’m very happy to find people like you who share their knowledge !
I have the same problem than Steve, to set a padding works when the icon is higher than its width, but it doesn’t work when the height is smaller than the width.
(I don’t know If I explain myself correctly, because English is not my mothertong )
Thank you for your help,
Sorry for my last comment, I just find out how to fix the problem : I set a line-height and ajust the font-size. If it can help someone !
Sophie, thanks for getting in touch!
That is awesome! I’m super happy you managed to find a solution! And I’m thankful you shared it here. It will surely help some people.
Salut,
Andras
Hi there,
Could you give me a hand please? I tried the first tutorial you had
https://divi-magazine.com/how-to-replace-the-blurb-icon-with-font-awesome/
and this one as well but I couldn’t make any of them work. I’ve been trying for a few hours and I`m kind of going crazy lol. Please let me know what I`m doing wrong.
this is where I`m trying to make the changes. http://crimecleaners.ca/services
Hey cata,
What is the issue you are having? I see 4 blurbs all of them having a nice icon in it. Did you get it to work?
Yes, I guess it wasn’t showing…anyway you did good job with the solution you found. Congrats!
I’m having no such luck. I either get no icon or the random icon I selected in the process. Sometimes I get a little square instead, but I have yet to see my chosen icon. I even did your beer example and came up empty. I’ll email you screen shots of everything I have. Thanks.
Hello Amy, I just sent you an email but will post it here too for the benefit of others.
What seems to be missing is step 2 from the “other” article: setting the icon size to 0.
You might not be able to do that with the size slider – as it goes only to 1 -, but you can simply enter 0 in the text field, then save the blurb settings. Update the page and check.
Hello. I have the same problem and I tried all you said. I just get a square and no icon.
Hi Daniel,
I’d be happy to take a look if you can share a URL with me where this is visible.
Cheers,
Andras
Thank’s a million Andras for your excellent tutorial! It has helpped me extremely today!
Prior to finding your guide I used the text field on the Content tab of the Blurb Module to insert the FA icons in it. Then positioning them in child-theme style.css, struggling with various vieport widths and never been able to get it nicely responsive.
Taking your way it works like a charm!
Hi Iwan,
I am happy to hear this has helped you so much! Makes it all the more worthwhile. 🙂
Good luck with your project! And feel free to reach out if you have any questions.
Cheers
Hello there,
I have followed the set of instructions from both this and the previous post and yet i still cannot get this to work. I’m working on a clients website currently and am not able to integrate font awesome icons into the blurbs. The website is vipertvpro.com Also, my email is wiseman1602@gmail.com in case we need to work on this firther
Hi Nick,
I sent you an email, let’s continue there.
Cheers,
Andras
I have a problem! I can not replace the cioni with those awesome fonts, I tried to find a solution by doing several experiments but I could not. Can you help me understand? I have a 3.0.76 divi version.
thank you
Ciao Daniele,
How far did you get? Can you share a url to a page where you tried to set up icons but it doesn’t work?
Hi Andras,
I get troubles with your solution… It don’t broke the website but it looks like there is a conflict with the Divi Builder.
The Blurb content isn’t rendering and I get “!/?” in a spinning circle instead.
So I’m wondering if you have an idea where the problem could come from, and if your hack still work with Font Awesome 5.+ and the last update of Divi.
PS: my Font Awesome icons are loaded via the enqueue method like in this tutorial: https://sridharkatakam.com/load-font-awesome-5-wordpress/
Thanks.
Hi Hervé,
Can you share with me a url where the problem is visible? I’d like to take a look.
Cheers,
Andras