The Divi Theme comes with a selection of icons that can be used with modules such as the blurb module but unfortunately there is no option to add custom icon. Thanks to Dan’s Divi Booster that allows to add custom icons to Blurb module with a new rich featured upload button inside the Divi Booster plugin section.

In this tutorial we will share how you can add custom icon to Divi Blurb module in both software side and manual process.

Adding Custom Icons using Divi Booster

The Divi Booster plugin lets you add icons to the Divi’s built-in icons.

To add custom icons using Divi Booster following the method below

  1. 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.
  2. Click on “Choose Image” then select the icon you want from the media library (or upload a new one) and then click “Use Image”.
  3. 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.:

custom icon divi booster 1

custom icon divi booster 2

custom icon divi booster 3

In this way, you can add as many icons as you like.

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:

custom icon divi booster 4

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 96×96 pixels in size, and one 16×16 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):

function myfont_icons($icons) {
$icons[] = 'myicon';
return $icons;
}
add_filter('et_pb_font_icon_symbols', 'myfont_icons');

function my_custom_fonts() { ?>
<style>
[data-icon="myicon"]::before {
background: url('http://www.mysite.com/angry-bird-icon-small.png');
content:'a' !important;
width:16px !important;
height:16px !important;
color:rgba(0,0,0,0) !important; }
</style>
<?php
}
add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts_js() { ?>
<script>
jQuery('.et-pb-icon').filter(function(){ return jQuery(this).text() == 'myicon'; }).html('<img src="http://www.mysite.com/angry-bird-icon.png"/>');
</script>
<?php
}
add_action('wp_footer', 'my_custom_fonts_js');

Snippet Credit: Divi Booster

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:

custom icon divi booster 5

Notice that the final icon is now our little angry bird icon.

Tutorial Source: Divi Booster
Image Credits: Divi Booster

Pin It on Pinterest

Share This