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

What do you need:

  1. You need to have Font Awesome ‘running’ on your site.
    1. You can do this easily with Font Awesome for Divi plugin version 1 or version 2, or
    2. Any other plugins out there, which embed Font Awesome into your site, or
    3. Enter one line of code into your style.css file
  2. Add custom class names to your blurbs
  3. Check the unicode code for the icon(s) you want to use
  4. 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.

fontawesome-blurb-css-classes

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.

fontawesome-blurb-beer

 

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! 🙂

css.php

If you liked this post ...

... then share it with your friends!