Please note, this article and instructions are for Font Awesome version 4.x.
For the instructions for Font Awesome 5 click here.
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.
3. Look up the Font Awesome icon
Go to the Font Awesome icons page and click on the icon you want to use.
Below the icons you will see the class of the icon and the unicode code, something like f002. This is what you need to remember.
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 */ }
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!
You never explained how to give your blurbs an extra class name in CSS.
Hi Jae,
Thanks for reaching out! Indeed, I didn’t explain in detail.
Open your Blurb Settings, go to the Custom CSS tab, and add the class name in the CSS Class field.
Hope this helps! Cheers,
Andras
No it does not help…are you suggesting you can add multiple class names to the class field? If so how is that done. He is referring to the EXTRA class name.
Hi Lawrence,
Yes, you can add multiple class names and divide them with a simple space. Like this:
https://cloudup.com/cJ5h393T_j7
Hope this helps. Let me know if you need more info.
Cheers,
Andras
Yes! This helped so much. I’m very new to css, but why can’t you couldn’t you use the blurb icon font settings and eliminate the font css ?
Hey Andy,
Thanks for getting in touch.
I’m sorry, I don’t quite understand the question. Are you asking why I’m not using the built in icons? Font Awesome provides a couple hundred more icons and there are users out there who would be happy to use those in a blurb. So I created this tutorial.
Does that answer your question? Is there something else?
Cheers
Thanks for this.
Whenever I use the unicode code I get a small square where the icon is supposed to go.
Hey Al,
Can you send me a link where this is visible? I’ll try to take a look.
Hey there, great article – I gave this a try, on my first attempt it worked. I went to add more (as per your instructions) and it wouldn’t work again.
Is there a different way or a UI ? Especially for using those images in a blurb.
http://thedigitalpixie.com/WDS/
(it’s the icon on the left – I just copied a blurb and worked with that)
Hey Kaaren, thanks for reaching out and for the kind words.
I’m happy to help you out and point you in the right direction. I’m a bit lost though, I wasn’t able to find it on the page.
Do you still need help with this?
So I seem to be running into an issue. Divi will not let me set the icon as text size 0. It goes to 1 no matter what?
Spoke too soon. I had another CSS style interfering. So while it still saves as one now is fixed hides behind the FA font. Thanks!
hello mike, i have the same problem, Divi don’t let me set the icon as text size 0. It goes to 1 no matter what… how didi you solve this problem?
Works like a charm, thank you so much for the tutorial.
I’m wondering if anyone here has some experience with divi-updates. I suppose that I need to apply the changes to style.css on every update, don’t I? Maybe a child-theme would be a solution here.
Hey there, it used to work fine but now I updated something (Divi or WordPress..) and icons display as unicode 🙁
Salut Polanri,
Thanks for reaching out and I’m sorry you are having this issue. If you are still having a problem then drop me a mail through the contact form with the page where you have the glitch and I can try to help you out.
Happy 2017!
Andras
We found the issue, a backslash was missing from the css code.
content: “f1b9”;
vs.
content: “\f1b9”;
I am still not able to get this to work. I have followed the instructions to the letter and I have searched everywhere in my main and child theme for some CSS conflict but I am still unable to get the Blurb Icon size to 0. What am I missing here?
Hi Lawrence,
Check this followup article, that might give you the answer you need.
http://www.divi-magazine.com/more-font-awesome-icons-in-a-blurb/
Feel free to reach out if you need more help.
Cheers,
Andras
Hey nice work with this…. but it’s not working on a mobile device … do you know why? test site is here http://rehab.juicywebsites.com.au
Hi Jason,
Can you point me to a section / blurb where you are having issues so I can check?
Thanks!
Andras
Worked great – thanks so much 🙂
I have the same problem as mentioned above. Divi will not let me set the icon as text size 0. It goes to 1….
Hello Gitta,
It looks like the newest Divi doesn’t allow you to set 0 with the slider. But you can simply enter 0 in the text field, then save the blurb settings. Update the page and check.
Let me know if that does the trick. :o)
You can manully type “0” instead of using the slider to make icon size zero.
I am not able to see the icons. It just gives me a blank space.
Can you please help? I am amidst development of the website. 🙁
TIA.
Hi Snehal,
Please drop me a message through the contact form with a URL to the page where the icons don’t show and I’ll check what could be wrong.
Cheers,
Andras
The address is http://www.odorite.in
got it thanks!
I installed the plugin on last wp/divi version and this error appear below the text field in the blurb module : Warning: Illegal string offset ‘override_tinymce’ in …./plugins/tdm-fontawesome-for-divi/tdm-fontawesome-for-divi.php on line 128
ok sorry…found a solution in the settings!
Hi, thanks for giving me a heads-up on that! I will try to fix that with the next release.
Cheers,
Andras
I understand all of your instructions and followed them, but I cannot make the icon appear, just get square (unicode?)… I someone else mention this. No problem making icon size 0, adding class, adding your plugin. Tried adding fontawesome script to head in divi, but it also appears your plugin does that. No problem finding unicod and adding css, but nothing… ugh – this is the greates idea if I could make it work!
I have a coming soon page up, so you cannot see the front end.
Hi Eleina,
Not sure what could be the issue. I’ll drop you a mail.
A.
Works like a charm! Thank you!
Stoked to hear that DP! Awesome!
Great tutorial – I am just stuck on one thing. The scales icon won’t go into a circle, I have tried various padding but it won’t play ball
https://elainewilliamscounselling.co.uk/
Oh yeah, that’s a tricky one. Try adding a negative horizontal margin of -6px to that icon. Something like this:
.scale-icon .et-pb-icon::after {
margin: 0px -6px;
}
Let me know if this does the trick.
THANK YOU!!!!
That sorted it perfectly 😀
What about Font Awesome 5? I notice that your instructions didn’t work with font Awesome 5? You might need to research to find a way to use Font Awesome 5 with Divi blurbs. I did a bit of research and the differences I’ve noticed is that Font Awesome doesn’t use font-family. It, instead, replace the icons with svg images. So the only solution that I can think of is to add the font awesome class to `.et_pb_blurb span`. I think it might work.
Hi Kristina,
That is an awesome and timely question, thanks!
I haven’t had the time yet to play around with Font Awesome 5 and the blurbs. FA5 has the option to use Web Fonts with CSS, might be that that will work. I will need to test that.
Also soon I’ll get the new version of the Font Awesome for Divi Builder out which includes support for FA4 and FA5.
Cheers,
Andras
Andras,
Thanks so much!
Also could you let me know the results of your test? I tried everything I could think of including using the Web Fonts with CSS as in “font-family: “Font Awesome 5 Free”;” but it didn’t work. So I went back to using Font Awesome 4 for now.
Font Awesome for Divi Builder, is that a plugin?
Sincerely, Kristina
I was playing around with it yesterday. You’re on the right path there. Use Web Fonts with CSS and change the font family as you wrote.
You will also need to change the class name from “fab” to something else, like “fa5”, in both the CSS snippet and adding the class names to the blurb. “fab” is used by FA5 for “Brands”, that’s why.
And one more CSS you will need to add is “font-weight: 900;”. And that should do the trick. 🙂
Let me know if that works out.
I will do a new blog post about this very soon.
Hi Andras,
I am looking forward to your new blog post about Font Awesome 5. I tried to follow your suggestion but it didn’t work. The only thing I could think of that was different is adding “” to “Integration” in Divi Theme Options where you can add code to the of your blog.
Sorry! I forgot to surround the code. Here’s the code I added to the header “. Hope it shows up this time.
Never mind, it didn’t work and I couldn’t delete the previous comments. The code is where I copied from Get Started page (https://fontawesome.com/get-started). I copied the code from Font Awesome Free CDN.
You can use Font Awesome on Blurbs without a need for plugins.
For Font Awesome 5.2.0 do the following:
1. Add the following lines to the Divi . Go to Divi Theme Options, then “Integration” and place the lines in the “Add code to the of your blog”
2. Add the following custom CSS to place a “brain” in a blurb. The CSS goes in the Divi Theme Options -> General -> “Custom CSS”
/*—- Custom FontAwesome Icons for Blurbs —-*/
.custom-blurb-icon .et-pb-icon::after {
content: “\f5dc”;
font-family: ‘Font Awesome 5 Free’ !important;
font-size: 100px !important;
}
3. Name the blurb you want to use the brain with accordingly. I used the name “custom-blurb-icon” in the CSS on step 2, so I will set that in the blurb Custom CSS Class.
Hi Cesar,
Thanks for your valuable comment!
Indeed, it is possible to add all that manually without the use of the plugin. Some people are uncomfortable doing so, thus they have the plugin as the alternative.
Also, self hosting requires downloading and uploading files, adding code and so on. This is all handled by one (or maybe two) clicks in the plugin.
thank you so much Andras!!! worked perfect on my site alpha-herb.com ) You are amazing!
Hi Andras,
i noticed that some icons from FontAwesome appear as square on the page. For example
1) class=”fas fa-globe-asia” f57e and
2) i class=”fas fa-mortar-pestle” f5a7
When I change the unicode into anything else, like f1da the icon appears normally.
What do you think might be the reason? Is it a problem of FontAwesome? Do you think there is a workaround. I see couple of people had similar issue.
Thank you!
Not quite sure why this could be happening. Can you share a URL with me where the issue is visible?
Hi,
Please check: https://www.christiandegeus.nl/contact 😉
I did everything right; yet the icon is not alligned with the blurb title.
What am I doing wrong?
Best, Chris
Hi Christian,
It looks like something is not right with the css:
https://dl.dropbox.com/s/h9uhctgc7aexjis/shot_190520_230130.jpg
If you follow the above guide, that should help.
Cheers
Hi,
I followed all your instructions but the icon does load properly using the css below. I add the class fab-transport in my blurb. then I call the font-awesome using cdn but when i tried to add an inline code like , the icon displays. I want it to change icon in my blurb. I don’t want to use the plugin.
.fab-transport .et-pb-icon::after {
content: “\f55e”;
font-family: “FontAwesome” !important;
font-size: 34px;
padding: 6px; /* OPTIONAL, READ NOTES */
}
See screenshot below
https://www.screencast.com/t/KITRvcW1x
Hi, can you share a URL where I can take a look at this?
A.