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
This brings you to the Font Awesome CDN website where you can login to get your code.
Note – I have tried both formats with several options. The result within Divi is the same.
Using the Divi Awesome font
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.
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
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.
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.
I replace it with this one – a finger pointing in the same direction as the arrow.
It performs the same function but has a unique appearance.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Here is an example of the Awesome Font icons in an overlay of a filtered portfolio.
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
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
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.
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