How to Add Font Awesome to Divi

March 12, 2019

Font Awesome is the most popular icon toolkit on the web. With thousands of free and premium icons, it’s easy to why with they’re so popular. Fortunately, Font Awesome icons are easy to use with Divi. In this article, we’ll see just how easy it is to manually add Font Awesome to Divi. If you’d prefer to add more icons to Divi using a plugin, check out our blog post on how to add more icons to Divi.

Adding Font Awesome to Divi Using Code

how-to-add-font-awesome-to-divi Theme Builder Layout

One of the advantages of Font Awesome is their icons are served to your through a CDN. The easiest way to integrate Font Awesome’s CDN directly into Divi without using a plugin is to embed the code into Divi’s header. You can then embed Font Awesome icons into the body of your website with HTML.

First, go to the Font Awesome start page and start a new project. Here, you can choose the types of icons you want to use with your website. By default, all of the free Webfont icons are selected. You can also choose pro, solid, regular, brands, or SVG. Copy the code. You’ll paste this into Divi.

how-to-add-font-awesome-to-divi-1 Theme Builder Layout

In your WordPress dashboard, go to Divi > Theme Options and select the Integration tab. Make sure the header code is enabled and paste the code into the code box. Font Awesome is now enabled and ready to use within your Divi content.

Adding the Font Awesome Code to Content

how-to-add-font-awesome-to-divi-2 Theme Builder Layout

You can now use the icon code snippets within the text of your Divi website. You can also style them (Font Awesome provides example code to get you started). First, find the icons you want to embed within your content. Filter the icons by the selections you made when embedding the code into Divi’s header to make them easier to search.

how-to-add-font-awesome-to-divi-3 Theme Builder Layout

Click on the icon to see the options and code. Make any selections you want to get the exact icon for your needs and then click on the HTML under the icon’s name. This will copy the code to your clipboard.

how-to-add-font-awesome-to-divi-4 Theme Builder Layout

Paste the code within your content. In this example, I’ve added the code within the h2 tags of a title within a text module. You can add them to any module or widget that takes code and style them inline or with the module’s settings.

how-to-add-font-awesome-to-divi-5 Theme Builder Layout

Here’s the icon styled within the text. I’ve styled the font size and color. I moved the span to indicate where the styling should end. I’ve included the first few sentences of text, but that can be excluded with another span.

how-to-add-font-awesome-to-divi-6 Theme Builder Layout

This one excludes the text, allowing it to use its own styling.

how-to-add-font-awesome-to-divi-7 Theme Builder Layout

For this one, I placed the span after the first word to see how the Font Awesome icon works with the text.

how-to-add-font-awesome-to-divi-8 Theme Builder Layout

For this example, I’ve replaced images in the Divi App Developer layout with icons from Font Awesome. I’ve added the icons to the text modules. I’ve adjusted the size and styled each one with a different color using in-text code.

how-to-add-font-awesome-to-divi-9 Theme Builder Layout

It’s also possible to style them using the module’s settings. The icon works like a font so you can style it the same way you’d style text in the text module. In this example, I’ve increased the font size, changed the color, added to padding to the left, and added text shadow.

how-to-add-font-awesome-to-divi-10 Theme Builder Layout

Here’s the design after pasting the styles into the other three text modules and customizing the colors for each module.

Adding Font Awesome Code to Widgets

how-to-add-font-awesome-to-divi-11 Theme Builder Layout

You can add the code to any widget that uses text or HTML. Here, I’ve added it to a Custom HTML widget.

how-to-add-font-awesome-to-divi-12 Theme Builder Layout

This one uses the same code in a Text widget.

how-to-add-font-awesome-to-divi-13 Theme Builder Layout

Here are both widgets displaying the icon.

how-to-add-font-awesome-to-divi-14 Theme Builder Layout

The HTML widget allows for styling in code.

how-to-add-font-awesome-to-divi-15 Theme Builder Layout

The text widget also allow for in-line styling using the text tab.

how-to-add-font-awesome-to-divi-16 Theme Builder Layout

Here are my examples with their styling. Like any text in a widget, you can also style them globally with the theme customizer.

Adding Font Awesome Code to Menus

how-to-add-font-awesome-to-divi-17 Theme Builder Layout

There are at least two easy ways the code can also be used in the menu: in the navigation label or in the CSS Class. For the CSS class, paste the class portion of the code in the CSS Classes field in the menu item you want to attach it to. In this case, it’s the fas fa-anchor portion of the code.

Note – If CSS Classes are not enabled, select Screen Options at the top of the screen and click CSS Classes under Show advanced menu properties.

how-to-add-font-awesome-to-divi-18 Theme Builder Layout

The icon is seen here above the ABOUT link. You can add icons to each menu item and use the theme customizer to style the entire menu. If you want to style each one independently you’ll need to paste the code in the navigation label.

how-to-add-font-awesome-to-divi-19 Theme Builder Layout

Place the code before or after the name you’d like the menu to display.

how-to-add-font-awesome-to-divi-20 Theme Builder Layout

Here are my styled Font Awesome icons in the menu. Each icon is styled separately. This is an easy way to add icons to the menu and style them.

Ending Thoughts

That’s our Font Awesome is a great resource for icons and, by adding the Font Awesome code to the Divi header, they’re easy to use with Divi. Use them within your content, widgets, and menus, and style them manually or within the Divi module settings.

If you want to add even more icons to Divi, check out the article How to Add More Icons to Divi.

We want to hear from you. Have you added Font Awesome icons to Divi using this method? Let us know about your experience in the comments below.

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

how-to-update-your-divi-theme-wordpress-and-plugins-safely Theme Builder Layout

How to Update Your Divi Theme, WordPress, and Plugins Safely

There have been a lot of updates lately for Divi, WordPress, and plugins. There’s almost always updates to themes and plugins when WordPress updates and it can sometimes take time for all of the updates to work together smoothly. The number of variables with all of...

how-to-create-a-rotated-global-header-with-divis-theme-builder Theme Builder Layout

How to Create a Rotated Global Header with Divi’s Theme Builder

Ever since the Divi Theme Builder has come out, we’ve tried to guide you through the process of creating your own global headers. We’ll continue doing that by showing you how to create a rotated global header that appears on the left side of your pages and posts. The...

4-elements-of-a-successful-promotional-video Theme Builder Layout

4 Elements of a Successful Promotional Video

Promotional videos are nothing new. Television ads have been running since the early 1940s. The format and delivery channels might have changed, but this marketing technique is still all about brand awareness and sales. If you incorporate the right elements, you can...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.