How to Use Font Awesome in Divi?

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]

Font Awesome (Internet’s favorite Icon set):

After Google fonts, Font Awesome is the most popular font and toolkit of icons built with CSS and Less. Along with its popularity and its free usage, Font Awesome is also the easiest one to use.

Font Awesome was initially released on August 21, 2012, by Dave Gandy and made for use with Bootstrap. Later, It was integrated with BootstrapCDN. Now, you can use high-quality Font Awesome icons that fit on any screen size that is created using scalable vectors.

Add Font Awesome to Divi (Easiest ways):

There are many ways to add Font Awesome to your Divi website but we will be discussing some of the easiest ones.

Add Font Awesome to Divi via plugin (Best method):

Yes, you read that right!

Adding Font Awesome to your Divi website using plugins is the easiest and preferred method. With the help of Font Awesome official WordPress plugin, you can use Font Awesome Free or Pro icons on your website.

For general use, you do not need to change anything in the default settings. The method button allows you to switch between web font or SVG. However, to be safe, I suggest you go for the web font option.

Once your plugin is installed and activated, you can add the icons to your pages and posts by using their names in shortcode or HTML snippets.

Like this,

[icon name=”fab fa-accusoft”]

This official plugin can also do troubleshooting and help you to prevent display and technical issues when multiple fonts are loading on your website.

Add Font Awesome to Divi manually (using code):

If you do not want to use a plugin, you can take on this manual method to add Font Awesome to your website manually. It is also another easy method but needs a little bit of code.

The very first thing you need to do is to go to the official website of Font Awesome, there you can see the option of “Start for Free”, click on that button.

It will redirect you to confirm some email verification and then provide you a Font Awesome account and Kit.

You can download those example files to understand how to proceed with the Kit Code or continue reading this article.

Go to your Divi theme options and navigate to integration settings. Copy your code and paste it in the “Add code to the <head> of your blog” section then save the changes.

You can now start including any of the icons you want, just like we did above in the plugin method.

This method works exactly like the plugin method but the only difference is, you do not have access to the shortcodes.

If you are having a problem while integrating this code in your theme, well no worries, I have another solution for you.

You need to go to the Appearance editor in your WordPress dashboard, choose your header.php file then go to where the head section ends, paste your code there.

Use Divi Icons anywhere:

If you are wanting to use Divi Icons anywhere on your website, you will need some basic knowledge of CSS. If you do not know anything about CSS, you can go for a web developer or to do this task, you can take in some basics from here.

I would recommend using HTML to your divi text module. This will allow you to place it with other modules and your text styling option will work fine with it. This method will also allow you to change the color, size, background color, and add a circle border, and hover effects.

How to add Font Awesome to Divi menu:

To make your website more appealing and attractive, you need to use some top-notch icons to stand out.

Yes, you can add Font Awesome to the Divi menu. This will work with any WordPress theme. To do this you will need font awesome official plugin installed in your site. If you have this all you need is to add icon CSS class in your menu item.

To add CSS class in your menu item you need to make sure your CSS class option is visible. Form your WordPress dashboard go to appearance>menus and click Screen Options (Top right corner) and checkmark the CSS classes. if you don’t have any menu for your website created yet, you will need to create one. And don’t forget to set the “Theme locations” for your menu.

Now click on your menu item and you will find a CSS class field. All you need is to add a CSS class from font awesome to this field. For example, you might want to add a home icon around your home text. Click on the item and add this – “fas fa-home” into CSS Classes (optional) field.

You can style this icon by selecting the CSS class. Don’t you know how to use CSS? CSS for Divi Might help. Check this out.

Now, you have got the idea of how to use attractive fonts on your Divi website. Using icon fonts save time during the designing process, they are lightweight as compared to any image. They are scalable, responsive, and resolution-independent graphics to give your website a bloomy look.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]