Divi comes with around 380 icons built in that can be used within blurbs, overlays, buttons, etc. As many as that is, there’s always the need for more. Some of the best resources for free icons are Font Awesome and Google’s Material Icons. Fortunately, these icons can be added to Divi easily with a third-party plugin called Divi Icon King.
In this article we’ll take a look at Divi Icon King (I’m reviewing version 1.1.0) and see just how easy it is to add these icons to Divi and see a new feature that it adds to all of the Divi Builder’s modules that use icons.
Installing, Activating, and Setting Up Divi Icon King
Upload and activate the plugin as normal. Once the plugin is activated you’ll need to go into the settings and choose your icon libraries.
In the dashboard menu, go to Settings, Divi Icon King. Here you can enable Font Awesome and Material Icons. Click the boxes of what you want to enable and select Save Changes. This raises the number of icon sets available within the Divi Builder to almost 2000 (around 1987, but I didn’t count them).
Font Awesome Icons – adds 675 scalable vector icons.
Material Icons – adds 931 lightweight Google web icon fonts.
The added icons are not stored on your server. Instead, they’re stored on a CDN and brought in as you load them. It only loads what you check. In other words, it isn’t loading everything and only showing you what you’ve checked. If it isn’t checked, it doesn’t load.
The plugin’s code is added to Divi and works with any module that uses icons. This means there are no special modules that you have to use. You’ll now see all of the new icons within every Divi module that uses icons.
Regular Divi Icons
Divi comes with around 380 icons. The image above is a Blurb module before installing Divi Icon King. Within the Content tab, select Use Icon to see the icons that are available.
Divi Icon King Filters
Divi Icon King adds a filter to the icon selections. Click the button labeled Filter Icons to see the filters.
This opens a search box where you can enter what you’re looking for. You can also click on the text under the search box and see icons from Elegant Themes, Outline, Solid, All, or select Close the close the filter. At this point I haven’t enabled Font Awesome or Material Icons.
After enabling Font Awesome and Material Icons, they’re now an option within the filter. I now have almost 2000 icons, and the only effort it took was installing the plugin and enabling the two brands of icons I wanted to add.
Clicking FontAwesome shows only the icons from Font Awesome.
Clicking Material shows only the Material Icons from Google.
These are the icons with outlines.
These are the solid icons.
Searching for Icons
The results of the search depend entirely on how the icons are labeled. This means some searches may not work as well as others. You might find something by typing in pizza but nothing is you type in food.
It also finds portions of words (as you can see in the image above). It will also include icons that contain the portion of the word that you searched for. For example, I typed in car and it included icons for cars as well as cart, card, etc.
Here I’ve searched for cart and it only gives me shopping carts.
You can also use the search to figure out which icon set provided the icon. When scrolling I saw the Star Wars Rebellion icon. I searched for rebel and it gave me the icon on the first try. I wanted to know which icon set provided it, so I clicked FontAwesome and scrolled until I found the rebel icon highlighted.
I found the filter useful even without using FontAwesome and Material Icons because it helps sort and find Elegant Themes’ icons, which speeds up development time. Don’t hit the enter key when you search. This will close the module.
Divi Icon King Examples
Here are a few examples. Most are blurbs, buttons, and overlay icons that I’ve replaced the originals with those from Font Awesome or Material Icons.
Since I found the Rebellion icon I couldn’t resist using it. Here’s an example using the free DiviStar layout pack by Geno Quiroz. I added blurbs and the rebel icon from Font Awesome – each one with a different color. I made them as large as possible. The controls are the same as normal Elegant Themes icons.
This one uses Elegant Themes’ free Code School layout pack. I’ve replaced the first two icons (the blurbs for Web Development and Javascript, which actually use images rather than icons), changed their colors and size, and added a circle to match the other icons. The first is from Material Icons. The second is from Font Awesome.
This one uses the free ET layout pack called Design Agency. It includes a button with an arrow that displays on hover. I’ve replaced the arrow with a pointing finger from Font Awesome.
This layout pack also uses hover overlay icons for the images. I replaced the icons with those from Material Icons.
Blurbs displayed small icons over a few lines of text. I removed the text and replaced the icons with icons from both Font Awesome and Material Icons. I kept the colors but made the icons full size at 120 pixels.
This one is from Elegant Themes’ free Restaurant layout pack. I’ve added an overlay with icon to the blog post images and placed a fork and spoon icon from Material Icons (as you can see in the center image).
Using Divi Icon King with Extra
Divi Icon King works great with Extra, and even works with the Category Builder. Here’s a look at the Design Agency layout pack with a YouTube icon within the button from Font Awesome.
This one uses a mailbox icon from Material Icons for the Send button.
Here’s a look at how it works with the Category Builder. This image shows the Post Module from the Category Builder with a coffee icon from Font Awesome as the icon in the image overlay.
I’m glad to see that it works with Extra and the Category Builder. Extra is usually left out by third-party developers, but I love Extra as a blogging and publishing platform, and my most popular website is built with Extra.
Using Divi Icon King with Third-Party Plugins
Divi Icon King works with third-party plugins that use icons. Here’s a look at Content Intense.
Content Intense displays the blog according to my selections (I selected Alps which allows for an overlay). I’ve added an icon from Material Icons in the blog overlay, which you can see in the center image.
Documentation and Support
Documentation is provided at the developer’s website. It includes a video demonstration, setup information, and a quick demo.
Support is provide at the developer’s website. The only problems I had were with my own test site (I needed to clear my cache for the icons to display properly in Extra’s Category Builder). I contacted support and the problem was solved within minutes.
- The plugin is available for purchase in most of the Divi marketplaces.
Ending Thoughts
Divi Icon King is an easy way to add hundreds of free icons to Divi to be used in blurbs, overlays, buttons, or any other module that uses icons. It works with Extra and even works with third-party plugins as long as they follow ET’s coding standards. If you’re looking for an easy way to add free icons from Font Awesome and Material Icons to Divi, Divi Icon King is worth a look.
We want to hear from you. Have you tried Divi Icon King? Let us know what you think about it in the comments.
Featured Image via Irina Adamovich / shutterstock.com
The post Divi Plugin Highlight: Divi Icon King appeared first on Elegant Themes Blog.
