How To Upload Font To Divi File Not Permitted

Divi Upload Icons is a third-political party plugin for Divi that makes it easy to add more icons to the Divi Builder. Dissimilar other icon plugins that only integrate Font Awesome and Material Icons, this ane lets y'all add any set up of icons you want. It but has to exist a compatible file type, and it happens to employ the five most popular file types.

The plugin adds an uploader to your WordPress installation where you lot'll drag and drop your icon files. The icons are then added to whatever Divi module that displays icons. Just like the standard Divi icons, any icon set that y'all upload tin be styled with the Divi Builder. In this Divi plugin highlight, we'll have a wait at Divi Upload Icons and encounter how easy it is to apply.

Installing and Activating Divi Upload Icons

Upload and activate the plugin equally normal, and then become to Settings > Divi Upload Icons in the dashboard menu to enter your activation key.

Uploading Icons with Divi Upload Icons

Likewise in the settings screen is the upload feature. Here, you lot'll upload your icons. The icons must be in .eot, .svg, .ttf, .woff, .woff2, and .css formats. You can download icons from whatever source you want and employ them with Divi Upload Icons equally long every bit they are in these formats and include the CSS file. To install the icons, elevate 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 accept to upload the CSS files along with the icons, and the icons accept to be a supported file. In this example, I'g uploading several sets. They include several file types and CSS files. Those in the image higher up 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 at present have over 2500 new icons. I downloaded them from iconfont, Dripicons, Foundation Icon Fonts, and Map Icons. The developer maintains a listing of icons that take been tested and you can utilize with Divi Upload Icons. Of course, at that place are many more icons you tin can utilize.

For comparison, here'southward the Divi blurb module before I uploaded the new icons. Divi includes 360 icons. You lot can get an idea of how many that is by looking at the length of the bar in the window.

This paradigm includes all of the 2500 icons that I uploaded. I now take a lot more icons to cull from and the bar for the window is much smaller. You can meet the icons in the Visual Builder, just 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. Y'all tin open or close the filter. It's closed in this instance.

Click Filter Icons to run across the icon families that you have installed and a search feature. Click whatsoever of the icon families to see just that family. Yous can also view all families or close the filter and search pick. 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 certain that partially depends on how many icons you have installed, so your experience might be dissimilar.

In this example, I've selected the Map Icons that I uploaded. There are well-nigh 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.

Yous tin 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 later on the search in order to meet the results by icon family. It does show you the name with the icon family unit when you hover over each icon. In the image higher up, I'm hovering over the second icon from the right. This is helpful enough, so the search filter isn't actually a high priority.

Divi Upload Icons Examples

Of class, 1 of the advantages of using icons is the power to arrange 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'due south icon choice, but the alive preview isn't working.

The icons show simply fine on the published page or post. Yous can still use the Visual Builder to customize the size and colors, you just won't come across them in the live preview. I prefer the Visual Builder when I'm customizing colors and sizes, but I'll use the Archetype Builder for the rest of the examples. This is the landing page from the Mortgage layout pack.

The icons wait great and can be customized just similar standard Divi icons. I plant all of these icons using the search feature. This is the default settings.

I inverse 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 await more similar to the original blueprint, just with my icons.

In this one, I've added a circle to each icon. I've inverse the colors of the circles and icons, and I've added a border to the 2nd and fourth from the left. I chose different colors just to show what they wait like.

Hither's how the icons look placed to the left of the text.

In this ane, I've replaced the images in the Golf Class 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 pattern.

They also look amazing when using the circle icon settings. I inverse the icon colour to white and used the tan from the layout as the circle's colour. 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 Architect'southward customizations.

Divi Upload Icons Toll

Divi Upload Icons is $24.97. It has unlimited usage and updates. Y'all can purchase Divi Upload Icons in the marketplace.

Ending Thoughts

Divi Upload Icons makes it easy to upload the exact icons you want from whatsoever font library. The idea behind the plugin is instead of installing thousands of icons that you don't need, you lot can install the exact icons and icon families that you lot 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 Architect or my website.

Go along 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 certain y'all follow the directions exactly or the fonts will be empty squares. As well, it doesn't work with Font Awesome 5, only it works great with four.vii.

I liked using Divi Upload Icons. I would like to utilise it with the Visual Builder, but information technology works peachy with the classic builder. It did take an extra try to make certain I had the right files, but because how many icon families there are on the cyberspace 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.

Nosotros want to hear from you lot. Have yous tried Divi Upload Icons? Allow us know what y'all remember about it in the comments.

Featured Image via hanss / shutterstock.com

The mail service Divi Plugin Highlight: Divi Upload Icons appeared first on Elegant Themes Web log .