1. Home
  2. Docs
  3. Developers “How To’s”
  4. Adding Icons to vc_icon

Adding Icons to vc_icon

It is possible to add your own icons to WPBakery Page Builder (formerly Visual Composer) shortcode vc_icon by following these steps:

1) Add icons param to vc_map with type “iconpicker”

<?php
array(
      'type' => 'iconpicker',
      'heading' => __( 'Icon', 'js_composer' ),
      'param_name' => 'icon_openiconic',
      'settings' => array(
        'emptyIcon' => false, // default true, display an "EMPTY" icon?
        'type' => 'openiconic',
        'iconsPerPage' => 200, // default 100, how many icons per/page to display
      ),
      'dependency' => array(
        'element' => 'icon_type',
        'value' => 'openiconic',
      ),
      'description' => __( 'Select icon from library.', 'js_composer' ),
    ),

 

3) Add filter vc_iconpicker-type-[type_of_icon_picker_settings] (e.g. vc_iconpicker-type-fontawesome) and return array in this function (check our wp-content\plugins\js_composer\include\params\iconpicker\iconpicker.php)

 

4) Next enqueue CSS when necessary: add_action vc_enqueue_font_icon_element (e.g. \vc_icon_element_fonts_enqueue function) and enqueue CSS:

<?php
function vc_icon_element_fonts_enqueue( $font ) {
  switch ( $font ) {
    case 'fontawesome':
      wp_enqueue_style( 'font-awesome' );\
      ...
}