Visual Composer Element Icon


If you’ve used Visual Composer in developing of themes probably you’ve thought at least one time to create your custom block. Add icons param to vc_map.

<div class="vc_element-icon icon-wpb-application-icon-large"></div>
<div class="vc_element-icon icon-wpb-application-plus"></div>
<div class="vc_element-icon icon-wpb-balloon-facebook-left"></div>
<div class="vc_element-icon icon-wpb-balloon-twitter-left"></div>
<div class="vc_element-icon icon-wpb-film-youtube"></div>
<div class="vc_element-icon icon-wpb-images-stack"></div>
<div class="vc_element-icon icon-wpb-information-white"></div>
<div class="vc_element-icon icon-wpb-layer-shape-text"></div>
<div class="vc_element-icon icon-wpb-layout_sidebar"></div>
<div class="vc_element-icon icon-wpb-map-pin"></div>
<div class="vc_element-icon icon-wpb-slideshow"></div>
<div class="vc_element-icon icon-wpb-toggle-small-expand"></div>
<div class="vc_element-icon icon-wpb-ui-accordion"></div>
<div class="vc_element-icon icon-wpb-ui-button"></div>
<div class="vc_element-icon icon-wpb-ui-separator-label"></div>
<div class="vc_element-icon icon-wpb-ui-separator"></div>
<div class="vc_element-icon icon-wpb-ui-tab-content"></div>
<div class="vc_element-icon icon-wpb-ui-tab-content-vertical"></div>
<div class="vc_element-icon icon-wpb-ui-pageable"></div>
<div class="vc_element-icon icon-wpb-pinterest"></div>
<div class="vc_element-icon icon-wpb-tweetme"></div>
<div class="vc_element-icon icon-wpb-single-image"></div>
<div class="vc_element-icon icon-wpb-call-to-action"></div>
<div class="vc_element-icon icon-wpb-raw-html"></div>
<div class="vc_element-icon icon-wpb-raw-javascript"></div>
<div class="vc_element-icon icon-wpb-flickr"></div>
<div class="vc_element-icon icon-wpb-graph"></div>
<div class="vc_element-icon icon-wpb-wp"></div>
<div class="vc_element-icon icon-wpb-vc_pie"></div>
<div class="vc_element-icon icon-wpb-images-carousel"></div>
<div class="vc_element-icon icon-wpb-vc_carousel"></div>
<div class="vc_element-icon icon-wpb-row"></div>
<div class="vc_element-icon icon-wpb-ui-empty_space"></div>
<div class="vc_element-icon icon-wpb-atm"></div>
<div class="vc_element-icon icon-wpb-ui-custom_heading"></div>
<div class="vc_element-icon icon-wpb-woocommerce"></div>
<div class="vc_element-icon icon-wpb-ninjaforms"></div>
<div class="vc_element-icon icon-wpb-vc_icon"></div>
<div class="vc_element-icon vc_icon-vc-gitem-post-excerpt"></div>
<div class="vc_element-icon vc_icon-vc-gitem-image"></div>
<div class="vc_element-icon vc_icon-acf"></div>
<div class="vc_element-icon vc_icon-vc-gitem-post-date"></div>
<div class="vc_element-icon vc_icon-vc-gitem-post-meta"></div>
<div class="vc_element-icon vc_icon-vc-gitem-post-title"></div>
<div class="vc_element-icon vc_icon-vc-media-grid"></div>
<div class="vc_element-icon vc_icon-vc-masonry-media-grid"></div>
<div class="vc_element-icon vc_icon-vc-masonry-grid"></div>
<div class="vc_element-icon icon-wpb-vc-round-chart"></div>
<div class="vc_element-icon icon-wpb-vc-line-chart"></div>
<div class="vc_element-icon icon-wpb-ui-tta-section"></div>

codepen
https://codepen.io/matt3224/pen/QNQKGY

Using for example: Add icons param to vc_map.

vc_map( array(
            'name'        => esc_html__( 'CA: Countdown Box', 'cmsaddons' ),
            'base'        => 'viki_countdown',
            'category'    => esc_html__( 'CA Elements', 'cmsaddons' ),
            'description' => esc_html__( 'Display Countdown Box.', 'cmsaddons' ),
            'icon' => 'icon-wpb-wp',
            'params'      => array(               
                array(
                    'type'        => 'textfield',
                    'admin_label' => true,
                    'heading'     => esc_html__( 'Text Days', 'cmsaddons' ),
                    'param_name'  => 'text_days',
                    'std'         => esc_html__( 'days', 'cmsaddons' ),
                    'group' => esc_html__( 'Text Settings', 'cmsaddons' ),
                ),
            )
        )
    )

The icon attribute allows to add a custom icon for the element. I created and uploaded my icon in the img folder in my theme and I used get_template_directory_uri() function to reach it.

'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',