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',