Divi 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 in-built way to add new fonts. Fortunately, there is a way we can work around this to add our own custom icons.
Note: this post is about uploading your own icons for use in modules that support the Divi icon picker. See here if you instead want more icons in the Social Media Follow Module.
Adding Custom Icons using Divi Booster
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
- Open the 'Site-wide Settings' toggle
- Open the 'Icons' sub-toggle
- Tick the checkbox next to the 'Add custom icons for use in modules' option to enable the feature.
- Click on 'Choose Image' to select the icon you want from the media library (or upload a new one), then click 'Use Image'.
The option should now look something like this:
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. To get rid of an icon, click on the little 'X' next to the icon you would like to remove.
Save the Divi Booster settings and your icon will now be available to you in the modules icon list.
Note: to use SVGs, add SVG support to WordPress with a plugin such as SVG Support.
Styling the Custom Icons
It'll depend slightly on which module the icons are being used in, but in general the size can be set in the same way as the rest of the icons. Similarly, the background should work as long as your icon image has a transparent background itself. Changing the icon color is a different matter. The built-in icons are 'font icons', meaning they are basically text, while the icons added in that Divi Booster option will be images. This means that the settings for changing the color of the built-in icons won't work on the added image icons. I hope to be able to add something in the future (probably along the lines of the filter options Divi includes for the entire module area). I'll update here if / when I'm able to. In the meantime, the best I can suggest is to modify the colors of your icons in an image editing program prior to uploading.
Compatibility with Third-Party Modules
In addition to working with the built-in Divi modules, this feature will work with many third-party Divi modules. While it will usually work without modification, some plugins will need a bit of extra work to ensure they are compatible. If you encounter a case where the custom icons aren't working on a particular module / field, please let me. Some plugins where I have explicitly tested for and resolved compatibility issues, along with the version they were addressed in Divi Booster, are:
- Divi Supreme (Divi Booster v4.1.7)
- Divi Supreme Pro (Divi Booster v4.1.7)
- WP Rocket (Divi Booster v3.8.8)
- Divi Breadcrumbs Module (in Divi Booster v3.7.9)
- Divi Icon King (Divi Booster v2.8)
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 Icons Manually using PHP
Important: the PHP code given here doesn't work in Divi 4.13 upwards. Divi Booster has already been updated to be compatible with the latest version of Divi. I hope to be able to update the manual code with the relevant fixes here soon.
Here's how to add custom icons manually via PHP code.
First, add the following PHP code to your site (e.g. in the functions.php file of your child theme). Be sure to take a backup / test on a staging site before using on a live site. There's a lot of code (adding custom icons is a tricky business), but you can basically ignore it all. The only thing that really matters is the last line, which I explain below.
if (!class_exists('DBDBCustomIcon')) {
class DBDBCustomIcon {
protected $id;
protected $url;
public function __construct($id, $url='') {
$this->id = $id;
$this->url = $url;
}
public static function setup() {
add_action('wp_head', array(__CLASS__, 'outputUserCss'));
add_action('wp_head', array(__CLASS__, 'outputSharedUserJs'));
add_action('wp_footer', array(__CLASS__, 'outputVisualBuilderJs'));
}
public static function outputUserCss() {
echo '<style>'.self::getUserCss().'</style>';
}
public static function outputSharedUserJs() {
echo '<script>'.self::getSharedUserJs().'</script>';
}
public static function outputVisualBuilderJs() {
if (function_exists('et_fb_enabled') && et_fb_enabled()) {
echo '<script>jQuery(function($){'.self::getMutationObserverJs().'});</script>';
}
}
public function init() {
$fontSymbolsPriority = apply_filters('DBDBCustomIcon_font_icon_symbols_priority', 50);
add_filter('et_pb_font_icon_symbols', array($this, 'addToFontSymbols'), $fontSymbolsPriority);
add_action('admin_head', array($this, 'outputIconPickerCss'));
add_action('wp_head', array($this, 'outputIconPickerCssFb'));
add_action('wp_footer', array($this, 'outputIconUpdateJs'));
add_action('wp_head', array($this, 'db014_user_css_for_custom_button_icon'));
add_action('wp_head', array($this, 'db014_user_css_for_custom_button_icons'));
add_action('wp_head', array($this, 'db014_user_css_for_inline_icons'));
add_action('wp_head', array($this, 'db014_user_css_for_custom_hover_icon'));
add_action('wp_head', array($this, 'db014_user_css_to_hide_unwanted_icons'));
}
function db014_user_css_for_custom_button_icons() { ?>
<style>
.et_pb_custom_button_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
.et_pb_custom_button_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:after {
background-size: auto 1em;
background-repeat: no-repeat;
min-width: 20em;
height: 100%;
content: "" !important;
background-position: left center;
position: absolute;
top: 0;
}
.et_pb_custom_button_icon[data-icon="<?php esc_attr_e($this->id); ?>"] {
overflow: hidden;
}
</style>
<?php
}
function db014_user_css_for_inline_icons() { ?>
<style>
.et_pb_posts .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
.et_pb_portfolio_item .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before {
content: '' !important;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.et_pb_posts .entry-featured-image-url:hover .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"] img,
.et_pb_portfolio_item .et_portfolio_image:hover .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"] img {
margin-top:0px; transition: all 0.4s;
}
.et_pb_posts .entry-featured-image-url .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"] img,
.et_pb_portfolio_item .et_portfolio_image .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"] img {
margin-top: 14px;
}
.et_pb_dmb_breadcrumbs a:first-child .db014_custom_hover_icon {
position: relative !important;
left: 0%;
transform: none;
vertical-align: middle;
margin-right: 8px;
}
.et_pb_dmb_breadcrumbs li .db014_custom_hover_icon {
position: relative !important;
left: 0%;
transform: none;
vertical-align: middle;
margin-right: 8px;
margin-left: 4px;
}
</style>
<?php
}
function db014_user_css_for_custom_hover_icon() { ?>
<style>
.db014_custom_hover_icon {
width:auto !important;
max-width:32px !important;
min-width:0 !important;
height:auto !important;
max-height:32px !important;
min-height:0 !important;
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
<?php
}
function db014_user_css_to_hide_unwanted_icons() { ?>
<style>
.et_pb_gallery .et_pb_gallery_image .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
.et_pb_blog_grid .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
.et_pb_image .et_pb_image_wrap .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
.et_pb_dmb_breadcrumbs > ol > li > a:first-child[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
.et_pb_dmb_breadcrumbs > ol > li[data-icon="<?php esc_attr_e($this->id); ?>"]:before
{
display:none !important;
}
</style>
<?php
}
function db014_user_css_for_custom_button_icon() {
$id = $this->id;
$url = $this->url;
$icon = '.et_pb_custom_button_icon[data-icon="'.esc_html($id).'"]';
$bg_img = empty($url)?'none':"url('".esc_html($url)."')";
echo <<<END
<style>
$icon:before,
$icon:after {
background-image: $bg_img;
}
</style>
END;
$is_svg = preg_match('#\.svg(\?[^.]*)?$#', $url);
if ($is_svg) {
// IE SVG background-size (as "auto" not supported)
// - width = half the 2em padding allocated for icon, and 50% height of button
echo <<<END
<style>
body.ie $icon:before,
body.ie $icon:after {
background-size: 1em 50%;
}
</style>
END;
}
}
public function addToFontSymbols($fontSymbols) {
$fontSymbols[] = $this->id;
return $fontSymbols;
}
public function outputIconUpdateJs() { ?>
<script>
jQuery(function($){
<?php if (!function_exists('et_fb_enabled') || !et_fb_enabled()) { ?>
db014_update_icon(<?php echo json_encode($this->id); ?>, <?php echo json_encode($this->url); ?>);
<?php } ?>
$(document).on('db_vb_custom_icons_updated', function () {
db014_update_icon(<?php echo json_encode($this->id); ?>, <?php echo json_encode($this->url); ?>);
});
});
</script>
<?php
}
public function outputIconPickerCssFb() {
if (function_exists('et_fb_enabled') && et_fb_enabled()) {
$this->outputIconPickerCss();
}
}
public function outputIconPickerCss() {
echo '<style>'.$this->getIconPickerCss().'</style>';
}
public function getIconPickerCss() {
$url = esc_html($this->url);
$id = esc_attr($this->id);
return <<<END
.et-fb-option--select-icon li[data-icon="{$id}"]:after,
.et-pb-option--select_icon li[data-icon="{$id}"]:before,
.et-pb-option ul.et_font_icon li[data-icon="{$id}"]::before {
background: url('{$url}') no-repeat center center;
background-size: cover;
content: 'a' !important;
width: 16px !important;
height: 16px !important;
color: rgba(0,0,0,0) !important;
}
END;
}
protected static function getSharedUserJs() {
return <<<'END'
function db014_update_icon(icon_id, icon_url) {
db014_update_icons(jQuery(document), icon_id, icon_url);
var $app_frame = jQuery("#et-fb-app-frame");
if ($app_frame) {
db014_update_icons($app_frame.contents(), icon_id, icon_url);
}
}
function db014_update_icons(doc, icon_id, icon_url) {
db014_update_custom_icons(doc, icon_id, icon_url);
db014_update_custom_inline_icons(doc, icon_id, icon_url);
}
function db014_update_custom_icons(doc, icon_id, icon_url) {
var $custom_icons = doc.find('.et-pb-icon:contains("'+icon_id+'")');
var icon_visible = (icon_url !== '');
var $icons = $custom_icons.filter(function(){ return jQuery(this).text() == icon_id; });
$icons.addClass('db-custom-icon');
$icons.html('<img class="dbdb-custom-icon-img" src="'+icon_url+'"/>');
$icons.toggle(icon_visible);
}
function db014_update_custom_inline_icons(doc, icon_id, icon_url) {
var $custom_inline_icons = doc.find('.et_pb_inline_icon[data-icon="'+icon_id+'"]');
var icon_visible = (icon_url !== '');
var $icons_inline = $custom_inline_icons.filter(function(){ return jQuery(this).attr('data-icon') == icon_id; });
$icons_inline.addClass('db-custom-icon');
$icons_inline.each(function(){
if (jQuery(this).children('.db014_custom_hover_icon').length === 0) {
if (jQuery(this).closest('.et_pb_dmb_breadcrumbs').length === 0) {
jQuery(this).html('<img class="db014_custom_hover_icon"/>');
} else {
jQuery(this).prepend(jQuery('<img class="db014_custom_hover_icon"/>'));
}
}
jQuery(this).children('.db014_custom_hover_icon').attr('src', icon_url);
});
$icons_inline.toggle(icon_visible);
}
END;
}
protected static function getMutationObserverJs() {
return <<<'END'
db014_watch_for_changes_that_might_update_icons();
function db014_watch_for_changes_that_might_update_icons() {
var target = document.getElementById('et-fb-app');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'characterData') {
$(document).trigger('db_vb_custom_icons_updated');
} else if (mutation.type === 'childList') {
if (db014_may_contain_icons(mutation.target)) {
$(document).trigger('db_vb_custom_icons_updated');
}
} else if (mutation.type === 'attributes') {
$(document).trigger('db_vb_custom_icons_updated');
}
});
});
observer.observe(
document.getElementById('et-fb-app'),
{
attributes: true,
attributeFilter: ["class"],
childList: true,
characterData: true,
subtree: true
}
);
}
function db014_may_contain_icons(target) {
if (target.className === undefined) {
return false;
}
var classes = target.className;
if (classes.search === undefined) {
return false;
}
if (classes.search(/(et-pb-icon|et_pb_inline_icon|et-fb-root-ancestor|et_pb_root--vb|et-fb-post-content|et_pb_section|et_pb_row|et_pb_column)/i) !== -1) {
return true;
}
return false;
}
END;
}
protected static function getUserCss() {
return <<<'END'
.db-custom-icon img {
height: 1em;
}
END;
}
}
}
DBDBCustomIcon::setup();
(new DBDBCustomIcon('myicon', 'http://www.mysite.com/angry-bird-icon.png'))->init();Related Post: Adding PHP to the Divi Theme
The final line is the one that actually adds an icon. To add your own icon, give it an id (it doesn't much matter what – I've called mine "myicon"), and change the image url to that of your icon. This calls the class added by the rest of the code, and does all the work of adding the icon to Divi. If you need more icons, just repeat the last line with a different id / URL.
If you now go into the settings for a module which accepts icons, such as the blurb module you should see something like this:
Notice that the final icon is now our custom 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:
Hi, I bought this yesterday so that I could add custom icons to my website. I've followed the instructions and when I click on my icon, it comes up with 20 different icons. Can you tell me what i'm doing wrong? Thank you.
Hi Ali, sorry you're having this issue. I've just released an update (Divi Booster 2.9.1) which I think should solve this issue. I hope it helps, but let me know if not. Thanks!
Hi Dan,
Thanks for the article for this. I have has success up to a certain point. I have added the icon into the icon list fora blurb module. However when I try to use it it is tiny compared to the Divi icons, I have used the recommended pixel sizes and have also tried manually adding it with the same outcome unfortunately.
Any help would be fantastic>
Cheers
Hey Richard, is there any chance you're able to send me a link to a page showing the problem, so that I can take a look for you? Thanks! Dan
I added an icon to Divi Booster following the instructions but see instead a string of other icons appear with my blurb. Here is a screenshot http://prntscr.com/nr2tkl
What do I need to do?
Hi Beryl, this seems to be an issue with the preview of the icon in the visual builder. It doesn't seem to affect the display of the icon on the page itself, so if you save the page and view it outside the visual builder you should see the correct icon displayed. I'm currently working on a fix for the issue and hope to have it released soon. If you have any questions about it in the meantime, please let me know. Thanks!
I have the exact same issue as Beryl. Any idea when then fix will be ready?
Hi Dean, I've just released a fix for this, in Divi Booster 2.9.1. I hope it helps but let me know if not. Thanks!
If I purchase the Divi Booster, can I add ITunes, Amazon, Spotify etc icons? And can I use the Divi Booster for my future/potential clients websites as well? Thank you
Hi Joseph, with Divi Booster you can add those three plus 250 or so other icons to the top header / footer. You'll find the feature at "Divi > Theme Customizer > Divi Booster > Social Media Icons". Your purchase is valid for use on an unlimited number of your own / clients' websites (including future / potential clients). I hope that helps, but let me know if you have any other questions. Thanks!
When i apply a colour to my icon and set an opacity in the divi builder ( a blurb section) the icon doesn't change at all.
I uploaded a black stroked png file.
What am I doing wrong?
Hi Zak, the built-in Divi icons are implemented using an "icon font" which is basically a font in which each letter is a picture. Because they are a font, they can be styled using the Divi color and opacity settings. However, when uploading images using the method I describe here you're actually uploading a png image and these don't respond to color settings applied to fonts. There isn't an easy way to change the color of a png image in CSS and I don't currently have a solution to offer you. There are some relatively new CSS features such as filters which offer a potential way of doing it, but it's not a straightforward process and I haven't had a chance to figure out how to make it work yet. If I do, I'll update here. In the meantime, the best I can suggest is to change the color / opacity of the image in an image editor (e.g. photoshop) prior to uploading. Thanks.
Cheers dan, fully understand. I've changed these in photoshop :-)
Hi Dan, I just purchased your Booster, with the hopes of accomplishing what is stated in this article. However, I've gotten this odd hover that seems to be pulling 4-5 different icons in addition to the one i created >< Any advise?
http://magicalherbal.dreamhosters.com/
(hover is on the first two products in the top row)
Also, I would like to make the icon much larger, is that possible?
Hi Kathleen, it looks like Divi made some changes which were preventing the Divi Booster feature from working correctly with the image module's hover overlay icon feature. I've fixed this in the next version of Divi Booster (2.7.3) which I'll hopefully have out soon. If you need to fix it in the meantime, you should be able to do so with this CSS:
.et_pb_image .et_pb_image_wrap .et_pb_inline_icon[data-icon^="wtfdivi014"]:before { display:none; }To make the icons bigger, you can use the following CSS:
.et_pb_image .et_pb_image_wrap .et_pb_inline_icon[data-icon^="wtfdivi014"] .db014_custom_hover_icon { max-width: 96px !important; max-height: 96px !important; }That should set them to the height of your uploaded images (i.e. 96px by 96px) rather than the 32px by 32px default used by Divi for the overlay icons.
You can add the CSS into the "Divi > Theme Options > General > Custom CSS" box. If you only want to apply the changes to certain image modules, you can give those modules a "CSS class" on the module settings "advanced" tab (for example "my-image-module-class") and then replace "et_pb_image" in the above code with that CSS class.
I hope that helps.
Anyway to change the Social Icons in the Person Module? I need Instagram to be an option. I've already change it in Theme Options and make the "Twitter" now Instagram. I had hope it would do this site wide, including modules, but no. It just did it for headers and footers. Any ideas?
Hi Kim, one option is my plugin, Divi Booster, which adds an Instagram icon option to the person module. Once installed, you'll find the "Instagram Profile Url" option just after the built in social icon options in the "Content" tab of the "Person Module Settings".
Perfect! I had read that but was unsure if it would also work on Person Modules as well as Blurbs. Thank you
You're welcome, Kim.
Note that the option added to the person modules is different to the custom icon feature discussed in this post and enabled for blurbs, buttons and the like. While for blurbs and so on you can upload any image to use as an icon, the person module only adds options for a couple of specific icons (i.e. "website" and "instagram"). Hopefully I can improve on that in the future.
Hi, is there anyway to make the icon bigger when you put it in a button?
Hi Sophie, I've just put up a quick post with a couple of options for increasing the icon size in the Divi Button module. I hope that helps!
https://divibooster.com/increasing-the-size-of-divi-button-icons/
Just added it to my site and it works perfectly. Thanks for this. I've been using the amazing Divi for a while now but only just bought your plugin. It's saving me a lot of time already as I manually had to put in a lot of css that you cover. Your support is also fantastic Dan – v.impressed with your comprehensive solution and how quick you respond (particularly with time differences as I'm guessing you're in the US and I'm in Australia!)
I'm really glad to hear you're finding the plugin useful, Sophie! I'm actually in Melbourne (well, round the bay a bit) – not sure where in Aus you are, but I we must be pretty close timezone-wise :)
I want to put the WhatsApp icon in the original version in the header of my site, but I can not.
Could you help me, please?
Hi Luiz, I'm not sure I understand what you're trying to do, sorry. I can see you've been able to add the WhatsApp icon in the top header of the site you've linked to – are you trying to do something different? Thanks!
How can i change the location second icon in mobile menu?
Hey Lawrence, where are you hoping to move the second icon to? Do you have a link to the site you're working on so that I can see how you have the menu set up at them moment? Thanks!
Hi!
I added an icon through Divi Booster following the instructions and it's not showing up in the icon set. Any thoughts?
Hi Amanda, I'm not aware of any issues that would cause this? Is there any chance I'd be able to login and take a look at what's going on? If so, can you please send me login details via the contact form. Thanks!
Hi Dan,
I bought the Divi Booster and have uploaded images to use as icons but I cannot change their colours, any thoughts please?
Hi Darren, the icons uploaded via Divi Booster are images, and unfortunately CSS doesn't offer an easy way to change the color of images. It looks like there are some possible approaches to colorizing images which I'd like to explore in the future, such as the accepted answer in this Stack Overflow post:
https://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour
However, as you can see they are a bit involved and I haven't had the opportunity to dig into the details yet.
For now the best I can offer is to use an image editing program to create variants of the icons in the colors you want and then upload those. Sorry I can't be more helpful at the moment, but I'll update here if I'm able to come up with a decent CSS solution.