How to Add Font Awesome to Divi

by | Mar 12, 2019 | Tutorials | 0 comments

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

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.

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

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.

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.

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.

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.

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

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

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.

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.

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

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

This one uses the same code in a Text widget.

Here are both widgets displaying the icon.

The HTML widget allows for styling in code.

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

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

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.

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.

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

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.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Featured Divi Products

 

Recommended Hosting

Pin It on Pinterest

Shares