The Divi Theme comes pre-packaged with a selection of icons which can be used with modules such as the blurb module. These icons are “font-icons” provided by Elegant Themes and there is no inbuilt way to add new fonts. Fortunately, there is a way we can work around this to add our own custom icons.
Adding Custom Icons using Divi Booster
My Divi Booster plugin lets you add new icons to the list of built-in icons. This makes them easily available to your modules, with no need to upload the image each time you want to use it. The icons will be available in modules which normally have the option to add an icon, such as the blurb and button modules.
To add custom icons using Divi Booster:
- Go to the Divi Booster settings page, then under “Site-wide Settings > Icons > Add custom icons for use in modules” you’ll see the option to upload a blurb icon.
- Click on “Choose Image” then select the icon you want from the media library (or upload a new one) and then click “Use Image”.
- Finally save the Divi Booster settings and your icon will now be available to you in the modules icon list.
There isn’t a limit on how many icons you can add. However, there is a bit trick to it. You can currently only add one image at a time. When you save the settings, another upload box will appear so you can add another icon. So just save after you upload each icon and you can add as many as you like, e.g.:
In this way, you can add as many icons as you like.
To get rid of an icon, click on the little “X” next to the icon you would like to remove.
Adding Custom Blurb Icons in Divi
It is now possible to add blurb icons directly in Divi, by going into the settings for your blurb module settings and setting “Use Icon” to “No” and then selecting an image to display with your blurb, like so:
Note that the Divi option lets you upload a custom icon to a single blurb module. Note that this is differs from the Divi Booster option which lets you add icons to the icon list (and which are therefore available to all your blurb modules). Depending on your needs one or the other of these may suit you better.
Adding Custom Blurb Icons Manually
First, create two versions of the icon you wish to add – one 96x96 pixels in size, and one 16x16 pixels in size.
Now we’ll add the smaller of the two pixels into the icon selection box shown in module settings. The following should be added into the Divi theme’s functions.php file (or, better yet, in the functions.php file of a child theme):
Related Post: Adding PHP to the Divi Theme
Change the image url to that of your icon. This creates a new icon (which we’ve called “myicon”) and adds it to the list of icons. We then use CSS to set our small icon as the background for the icon selection button and use some CSS / jQuery to make it display correctly.
If you now go into the blurb module settings you should see something like this:
Notice that the final icon is now our little angry bird icon.
Select the new icon and save the blurb module. Now view the page with your blurb module. If all goes well, you should see your new icon, like so: