Divi Plugin Highlight Divi Font Awesome

Divi comes with a lot of icons. Even though it has nearly 400 icons, you sometimes want an icon that is not in the list. Many users are turning to Awesome Font, which is one of the most popular sources of free icons. There are several ways to introduce Awesome Font icons into Divi, but one of the simplest methods I've seen is that of a third-party plugin called Divi Font Awesome .

Divi Font Awesome does not add new modules or features. It simply adds Awesome Font icons to any module that already has icons. In this article, we will see how it works with these modules and will see some examples in action.

Setup of the Divi Funky Font

Divi Plugin Highlight: Divi Font Awesome

After installing and activating the plugin, you will need to configure it. In the dashboard menu, go to Settings> Divi Font Awesome. Here you can enter your license key, CDB integration code ID and choose the format (choose between JavaScript and CSS). To obtain your CDN identification code, click on the Font Awesome CDN account link.

Divi Plugin Highlight: Divi Font Awesome

This brings you to the Font Awesome CDN website where you can login to get your code.

Divi Plugin Highlight: Divi Font Awesome

The ID is the code that you are going to paste into the CDN Integration ID field. You will first have to provide some parameters. Give the code a name and choose the version between JavaScript and CSS. If you choose JavaScript, you can also choose best practices for automatic accessibility and asynchronous icon loading. Copy the ID and save it when you are done. You can change it later if you wish.

Note – I have tried both formats with several options. The result within Divi is the same.

Divi Plugin Highlight: Divi Font Awesome

Paste the ID and choose the format corresponding to what you chose when setting up the ID. I used JavaScript when I created the identifier, so I chose JavaScript to match. Save the changes and you are ready to use Divi Font Awesome.

Using the Divi Awesome font

Divi Plugin Highlight: Divi Font Awesome

Rather than creating new modules, Divi Font Awesome adds Font Awesome icons to your current modules. The image above is the standard button module without Divi Font Awesome. It's about 380 fonts. Not bad actually.

Divi Plugin Highlight: Divi Font Awesome

Here is the same button module with Divi Font Awesome installed. The small line scrolly (technical term) is much smaller, which indicates that it has more icons to browse. We now have more than 600 additional icons, bringing the total to almost 1000.

Icons are added at the bottom of the Divi icons list. This helps you to know which are the default Divi icons and those of Font Awesome. The new icons are stylish with the original icons. This means that all parameters, settings, CSS, etc., apply to Awesome Font icons without any additional work on your part.

Awesome Police Divi Examples

Divi Plugin Highlight: Divi Font Awesome

Here are the icons of the call-to-action module. For early examples, I will use the homepage of the SEO agency, which has a lot of buttons that use a right arrow. You can see it in the call-to-action module.

Divi Plugin Highlight: Divi Font Awesome

Here is the original icon in the button. It looks good. It's functional and easy to understand. With Divi Font Awesome, we can easily make the buttons different from those of others.

Divi Plugin Highlight: Divi Font Awesome

I replace it with this one – a finger pointing in the same direction as the arrow.

Divi Plugin Highlight: Divi Font Awesome

It performs the same function but has a unique appearance.

Divi Plugin Highlight: Divi Font Awesome

Here is the services section of the homepage of the SEO agency. It uses images rather than icons (which is an extremely versatile option) and calls for action modules for text and to read more buttons. I want to replace the images with blurbs so I can use the Font Awesome icons.

Divi Plugin Highlight: Divi Font Awesome

Here is the same layout using blurbs. These icons are those integrated in Divi. I use them first so I can style them to see if the Font Awesome icons keep the same style.

Divi Plugin Highlight: Divi Font Awesome

I stylized the color with # 7676ff to match parts of the original images. I placed the placement to the left and adjusted the font size of the icon to 26 pixels. Then I will change the icons to those of Font Awesome.

Divi Plugin Highlight: Divi Font Awesome

Here's the layout using the Awesome Font icons. I did not make any changes to the style. These icons use the same style as the Divi icons.

Divi Plugin Highlight: Divi Font Awesome

I've now added a border using # a6a6ff. I've changed the location at the top and adjusted the font size of the icon to 32. To help center alignment, I've centered the I & # 39; call to the action of the text orientation and alignment of the buttons. I've also placed 40 pixels for padding at the bottom of the top row so that the two rows of blurbs stand out from each other.

Divi Plugin Highlight: Divi Font Awesome

This renders the icon white, uses the circle with the color # a6a6ff, and removes the border of the circle. I left the same sizes in the previous example.

Divi Plugin Highlight: Divi Font Awesome

This time I changed a little the layout. I've placed the icons on the left with the text on the right. I've set the color of the icon to # 8b21bb, removed the circle and set the font size of the icon to 64 pixels. I've also replaced the arrow icon for the call-to-action button with one of Awesome Font. The new icon automatically took the style set for the Divi icon. I have not made any changes to this icon.

Divi Plugin Highlight: Divi Font Awesome

This is the shop page of the layout pack of the restaurant. I've added icons to each of the buttons. I did not make any changes to the style because I wanted them to blend with the already existing pattern, but I turned off the Show only icon on rollover option. button.

Divi Plugin Highlight: Divi Font Awesome

This is the pricing page for the Marketplace Photo Layout Pack. It uses icons for credit cards and payment gateways to show in various ways that visitors can make a payment.

Divi Plugin Highlight: Divi Font Awesome

Here is an example of the Awesome Font icons in an overlay of a filtered portfolio.

Divi Plugin Highlight: Divi Font Awesome

Here's Divi Awesome Font in a blog overlay. This is the blog page of the travel agency's layout pack.

Using Awesome Divi Font in Theme Customizer

Divi Plugin Highlight: Divi Font Awesome

You can also access the Font Awesome icons of the Theme Customizer. All over 600 Font Awesome icons are available in this menu. Here, I selected the button menu and chose an icon to use by default.

Using Awesome Divi Font with Extra

Divi Plugin Highlight: Divi Font Awesome

Since Divi Font Awesome adds to the Divi Builder, it goes without saying that it would work with Extra. This is the layout of the magazine home page in the category generator. All Font Awesome icons are available in modules that include icons.

Impressive License and Documentation by Divi Font

The plugin can be installed on unlimited sites that you build for you or your customers. It includes 6 months of support and updates for life. The documentation is provided in the form of a video that guides you through the settings and displays examples of the plugin used.

You can see more information about the plugin on the developer's website .

End of Thoughts

Divi Font Awesome is easy to set up and use. The video guides you through if you want to see how it's done. As it adds icons to the Divi modules, the choice of your icons works the same as with normal Divi icons. Its only feature is that it adds more than 600 Awesome Font icons to your existing list of available icons. The only difference you will notice is the number of icons available.

This worked so well with Theme Customizer, Extra, and I even managed to use it with third party plugins that use Divi icons. If you are looking for additional features, this plugin is not what you are looking for. If you just want an easy way to add Awesome Font icons, Divi Awesome Font is worth a look.

We want to hear from you Did you try Divi Font Awesome? Tell us what you think in the comments.

Picture of the star by Alex Gorka / shutterstock.com

Load More Related Articles
Load More By Amit Ghosh
Load More In WordPress Plugins

Leave a Reply

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