Visual Composer – Fixing icon bleeding to child elements in admin

When mapping shortcodes using vc_map, you can assign icons to your new Visual Composer element.

If you created a container element, that wraps around other  elements, the child element icon will currently be overwritten with the parent icon. A fix is apparently on its way :)

Currently the only way is to skip the icon option completely and use pure CSS for that.

You can enqueue a CSSs file for the admin through a vc_map option “admin_enqueue_css“.

.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i, 
#vc_your_element i.vc_element-icon {
        background-position: 0 0;

        background-image: url(/path_to_images/vc_your_element.png)!important;

        -webkit-background-size: contain;

        -moz-background-size: contain;

        -ms-background-size: contain;

        -o-background-size: contain;

        background-size: contain;

}

The CSS targets the icon of the displayed element in the editor and the icon when adding new elements to the layout.

Enjoy coding …