Divi Upload Icons is a third-party plugin for Divi that makes it simple so as to add extra icons to the Divi Builder. Not like different icon plugins that handiest combine Font Superior and Subject matter Icons, this one allows you to upload any set of icons you need. It simply must be a suitable record kind, and it occurs to make use of the 5 most well liked record sorts.
The plugin provides an uploader for your WordPress set up the place you’ll drag and drop your icon recordsdata. The icons are then added to any Divi module that presentations icons. Similar to the usual Divi icons, any icon set that you simply add can also be styled with the Divi Builder. On this Divi plugin spotlight, we’ll check out Divi Add Icons and spot how simple it’s to make use of.
Putting in and Activating Divi Add Icons
Add and turn on the plugin as standard, after which cross to Settings > Divi Add Icons within the dashboard menu to go into your activation key.
Importing Icons with Divi Add Icons
Additionally within the settings display is the add function. Right here, you’ll add your icons. The icons should be in .eot, .svg, .ttf, .woff, .woff2, and .css codecs. You’ll obtain icons from any supply you need and use them with Divi Add Icons so long as they’re in those codecs and come with the CSS record. To put in the icons, drag and drop them into the add window. The directions are equipped within the add house and there’s a quick video that demonstrates use it.
Icons every so often come with a couple of codecs. You need to add the CSS recordsdata in conjunction with the icons, and the icons must be a supported record. On this instance, I’m importing a number of units. They come with a number of record sorts and CSS recordsdata. The ones within the symbol above with the orange icons have lacking recordsdata.
The recordsdata on this instance are proper. I’ve uploaded supported record sorts with their CSS recordsdata. I now have over 2500 new icons. I downloaded them from iconfont, Dripicons, Basis Icon Fonts, and Map Icons. The developer maintains a checklist of icons which have been examined and you’ll be able to use with Divi Add Icons. In fact, there are lots of extra icons you’ll be able to use.
For comparability, right here’s the Divi blurb module earlier than I uploaded the brand new icons. Divi comprises 360 icons. You’ll get an concept of what number of this is through having a look on the duration of the bar within the window.
This symbol comprises the entire 2500 icons that I uploaded. I now have much more icons to make a choice from and the bar for the window is far smaller. You’ll see the icons within the Visible Builder, but it surely doesn’t come with the brand new clear out and seek gear.
Divi Add Icons Clear out and Seek
A brand new clear out software is added if you happen to use the vintage builder. You’ll open or shut the clear out. It’s closed on this instance.
Click on Clear out Icons to peer the icon households that you’ve got put in and a seek function. Click on any of the icon households to peer simply that circle of relatives. You’ll additionally view all households or shut the clear out and seek possibility. The clear out works rapid. Clicking on an icon circle of relatives or in search of icons displays the icons virtually straight away, even with my 2500 icons. I’m positive that partly is dependent upon what number of icons you’ve got put in, so your enjoy could be other.
On this instance, I’ve decided on the Map Icons that I uploaded. There are virtually 200 icons on this icon circle of relatives.
Listed here are the Basis Icons. It additionally has with reference to 200 icons.
Listed here are the Icofonts. This icon circle of relatives provides over 2000 icons.
You’ll seek through key phrase or through icon circle of relatives identify. The consequences come with icons from the entire icon households that you simply’ve uploaded and those who have been already to be had in Divi.
It will be attention-grabbing if the clear out would paintings after the quest with a purpose to see the consequences through icon circle of relatives. It does display you the identify with the icon circle of relatives while you hover over every icon. Within the symbol above, I’m soaring over the second one icon from the proper. That is useful sufficient, so the quest clear out isn’t actually a prime precedence.
Divi Add Icons Examples
In fact, one of the crucial benefits of the use of icons is the power to regulate sizes, colours, upload circles, borders, and many others., the use of the Divi Builder. The plugin and icons do paintings with the Visible Builder, but it surely doesn’t display the icons within the reside view. This case displays the icons within the module’s icon variety, however the reside preview isn’t operating.
The icons display simply high quality at the revealed web page or put up. You’ll nonetheless use the Visible Builder to customise the dimensions and colours, you simply gained’t see them within the reside preview. I want the Visible Builder once I’m customizing colours and sizes, however I’ll use the Vintage Builder for the remainder of the examples. That is the touchdown web page from the Loan format pack.
The icons glance nice and can also be custom designed similar to usual Divi icons. I discovered all of those icons the use of the quest function. That is the default settings.
I modified the colours to check the format, similar to the unique photographs the format used.
For this one, I’ve decided on to make use of the font dimension for the icon and changed it to 32px. It’s beginning to glance extra very similar to the unique design, however with my icons.
On this one, I’ve added a circle to every icon. I’ve modified the colours of the circles and icons, and I’ve added a border to the second one and fourth from the left. I selected other colours simply to turn what they seem like.
Right here’s how the icons glance positioned to the left of the textual content.
On this one, I’ve changed the pictures within the Golfing Path format with icons. I’ve used colours from the format and sized them at 48px.
For this situation, I’ve disabled the font dimension adjustment for the icons. That is the default dimension, at 96px. They mix smartly with the format’s design.
Additionally they glance superb when the use of the circle icon settings. I modified the icon colour to white and used the tan from the format because the circle’s colour. The icons are nonetheless at 48px.
For this one, I’ve used one of the crucial sunglasses of inexperienced from the format. There are a large number of probabilities with the Divi Builder’s customizations.
Divi Add Icons Value
Divi Add Icons is $24.97. It has limitless utilization and updates. You’ll acquire Divi Add Icons within the market.
Divi Add Icons makes it simple to add the precise icons you need from any font library. The speculation in the back of the plugin is as a substitute of putting in hundreds of icons that you simply don’t want, you’ll be able to set up the precise icons and icon households that you need to make use of together with your Divi site.
Because you’re importing the icons into the Divi Builder, they’re saved for your server. I uploaded over 2500 icons and had no velocity problems with the Divi Builder or my site.
Remember that it does require fonts with the font record and CSS record. It’s simple to add the fonts incorrectly (bet how I do know). Remember to observe the instructions precisely or the fonts shall be empty squares. Additionally, it doesn’t paintings with Font Superior 5, but it surely works nice with 4.7.
I appreciated the use of Divi Add Icons. I wish to use it with the Visible Builder, but it surely works nice with the vintage builder. It did take an additional take a look at to ensure I had the proper recordsdata, however taking into consideration what number of icon households there are on the web it’s smartly value taking the time to seek out icons with the proper recordsdata. Icons don’t seem to be laborious to seek out, and the developer supplies a lot of hyperlinks to icon that he’s already examined.
Should you’re all for added your individual icons to the Divi Builder, Divi Add Icons is value a glance.
We need to pay attention from you. Have you ever attempted Divi Add Icons? Tell us what you take into accounts it within the feedback.
Featured Symbol by the use of hanss / shutterstock.comWordPress Web Design