Divi Upload Icons is a third-party plugin for Divi that makes it easy to add more icons to the Divi Builder. Unlike other icon plugins that only integrate Font Awesome and Material Icons, this one lets you add any set of icons you want. It just has to be a compatible file type, and it happens to use the five most popular file types.
The plugin adds an uploader to your WordPress installation where you’ll drag and drop your icon files. The icons are then added to any Divi module that displays icons. Just like the standard Divi icons, any icon set that you upload can be styled with the Divi Builder. In this Divi plugin highlight, we’ll take a look at Divi Upload Icons and see how easy it is to use.
Installing and Activating Divi Upload Icons
Upload and activate the plugin as normal, and then go to Settings > Divi Upload Icons in the dashboard menu to enter your activation key.
Uploading Icons with Divi Upload Icons
Also in the settings screen is the upload feature. Here, you’ll upload your icons. The icons must be in .eot, .svg, .ttf, .woff, .woff2, and .css formats. You can download icons from any source you want and use them with Divi Upload Icons as long as they are in these formats and include the CSS file. To install the icons, drag and drop them into the upload window. The instructions are provided in the upload area and there is a short video that demonstrates how to use it.
Icons sometimes include multiple formats. You have to upload the CSS files along with the icons, and the icons have to be a supported file. In this example, I’m uploading several sets. They include several file types and CSS files. Those in the image above with the orange icons have missing files.
The files in this example are correct. I’ve uploaded supported file types with their CSS files. I now have over 2500 new icons. I downloaded them from iconfont, Dripicons, Foundation Icon Fonts, and Map Icons. The developer maintains a list of icons that have been tested and you can use with Divi Upload Icons. Of course, there are many more icons you can use.
For comparison, here’s the Divi blurb module before I uploaded the new icons. Divi includes 360 icons. You can get an idea of how many that is by looking at the length of the bar in the window.
This image includes all of the 2500 icons that I uploaded. I now have a lot more icons to choose from and the bar for the window is much smaller. You can see the icons in the Visual Builder, but it doesn’t include the new filter and search tools.
Divi Upload Icons Filter and Search
A new filter tool is added if you use the classic builder. You can open or close the filter. It’s closed in this example.
Click Filter Icons to see the icon families that you have installed and a search feature. Click any of the icon families to see just that family. You can also view all families or close the filter and search option. The filter works fast. Clicking on an icon family or searching for icons shows the icons almost instantly, even with my 2500 icons. I’m sure that partially depends on how many icons you have installed, so your experience might be different.
In this example, I’ve selected the Map Icons that I uploaded. There are almost 200 icons in this icon family.
Here are the Foundation Icons. It also has close to 200 icons.
Here are the Icofonts. This icon family adds over 2000 icons.
You can search by keyword or by icon family name. The results include icons from all of the icon families that you’ve uploaded and those that were already available in Divi.
It would be interesting if the filter would work after the search in order to see the results by icon family. It does show you the name with the icon family when you hover over each icon. In the image above, I’m hovering over the second icon from the right. This is helpful enough, so the search filter isn’t really a high priority.
Divi Upload Icons Examples
Of course, one of the advantages of using icons is the ability to adjust sizes, colors, add circles, borders, etc., using the Divi Builder. The plugin and icons do work with the Visual Builder, but it doesn’t show the icons in the live view. This example shows the icons in the module’s icon selection, but the live preview isn’t working.
The icons show just fine on the published page or post. You can still use the Visual Builder to customize the size and colors, you just won’t see them in the live preview. I prefer the Visual Builder when I’m customizing colors and sizes, but I’ll use the Classic Builder for the rest of the examples. This is the landing page from the Mortgage layout pack.
The icons look great and can be customized just like standard Divi icons. I found all of these icons using the search feature. This is the default settings.
I changed the colors to match the layout, just like the original images the layout used.
For this one, I’ve selected to use the font size for the icon and adjusted it to 32px. It’s starting to look more similar to the original design, but with my icons.
In this one, I’ve added a circle to each icon. I’ve changed the colors of the circles and icons, and I’ve added a border to the second and fourth from the left. I chose different colors just to show what they look like.
Here’s how the icons look placed to the left of the text.
In this one, I’ve replaced the images in the Golf Course layout with icons. I’ve used colors from the layout and sized them at 48px.
For this example, I’ve disabled the font size adjustment for the icons. This is the default size, at 96px. They blend well with the layout’s design.
They also look amazing when using the circle icon settings. I changed the icon color to white and used the tan from the layout as the circle’s color. The icons are still at 48px.
For this one, I’ve used one of the shades of green from the layout. There are a lot of possibilities with the Divi Builder’s customizations.
Divi Upload Icons Price
Divi Upload Icons is $24.97. It has unlimited usage and updates. You can purchase Divi Upload Icons in the marketplace.
Ending Thoughts
Divi Upload Icons makes it easy to upload the exact icons you want from any font library. The idea behind the plugin is instead of installing thousands of icons that you don’t need, you can install the exact icons and icon families that you want to use with your Divi website.
Since you’re uploading the icons into the Divi Builder, they are stored on your server. I uploaded over 2500 icons and had no speed issues with the Divi Builder or my website.
Keep in mind that it does require fonts with the font file and CSS file. It is easy to upload the fonts incorrectly (guess how I know). Make sure you follow the directions exactly or the fonts will be empty squares. Also, it doesn’t work with Font Awesome 5, but it works great with 4.7.
I liked using Divi Upload Icons. I would like to use it with the Visual Builder, but it works great with the classic builder. It did take an extra try to make sure I had the right files, but considering how many icon families there are on the internet it’s well worth taking the time to find icons with the right files. Icons are not hard to find, and the developer provides lots of links to icon that he’s already tested.
If you’re interested in added your own icons to the Divi Builder, Divi Upload Icons is worth a look.
We want to hear from you. Have you tried Divi Upload Icons? Let us know what you think about it in the comments.
Featured Image via hanss / shutterstock.com
The post Divi Plugin Highlight: Divi Upload Icons appeared first on Elegant Themes Blog.
