Adding new Icons to Visual Composer

问题

I am trying to add a new font icon set to Visual Composer and although the name is appearing in the dropdown; No dropdown for the actual font icons are being loaded and I cannot figure out what's missing or wrong with my code below.

Any help would be much appreciated.

// Add new custom font to Font Family selection in icon box module
function reach_add_new_icon_set_to_iconbox( ) {
  $param = WPBMap::getParam( 'vc_icon', 'type' );
  $param['value'][__( 'Reach Icons', 'reach-rdp' )] = 'reach_icons';
  vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'init', 'reach_add_new_icon_set_to_iconbox', 40 );

function reach_add_font_picker() {
  vc_add_param( 'vc_icon', array(
      'type'       => 'iconpicker',
      'heading'    => esc_html__( 'Icon', 'reach-rdp' ),
      'param_name' => 'icons_reach_icons',
      'settings' => array(
          'emptyIcon'    => false,
          'type'         => 'reach_icons',
          'iconsPerPage' => 20,
  ),
      'dependency' => array(
      'element'    => 'icon_type',
      'value'      => 'reach_icons',
  ),
    'group' => esc_html__( 'Icon', 'reach-rdp' ),
  )
  );
}
add_filter( 'vc_after_init', 'reach_add_font_picker', 40 );

function reach_vc_iconpicker_type_reach_icons( $icons ) {
// Add custom icons to array
  $icons['Reach Icons'] = array(
    array( "icon-arrow-left" => "Arrow Left" ),
  );

// Return icons
  return $icons;
}
add_filter( 'vc_iconpicker-type-reach_icons', 'reach_vc_iconpicker_type_reach_icons' );


/**
 * Register Backend and Frontend CSS Styles
 */
add_action( 'vc_base_register_front_css', 'leadinjection_vc_iconpicker_base_register_css' );
add_action( 'vc_base_register_admin_css', 'leadinjection_vc_iconpicker_base_register_css' );
function leadinjection_vc_iconpicker_base_register_css(){
    wp_register_style('reach_icons', get_stylesheet_directory_uri() . '/assets/css/reach-font.css');
}

/**
 * Enqueue Backend and Frontend CSS Styles
 */
add_action( 'vc_backend_editor_enqueue_js_css', 'leadinjection_vc_iconpicker_editor_jscss' );
add_action( 'vc_frontend_editor_enqueue_js_css', 'leadinjection_vc_iconpicker_editor_jscss' );
function leadinjection_vc_iconpicker_editor_jscss(){
    wp_enqueue_style( 'reach_icons' );
}

回答1:

It looks like you do the most things correct, you just need to replace:

add_filter('init....)

to:

add_action('vc_after_init',....)

update: Also you have a wrong param name in dependency. it should be:

'element'    => 'type',

And I also will recommend to use the weight attribute to make sorting better:

function reach_add_new_icon_set_to_iconbox( ) {
    $param = WPBMap::getParam( 'vc_icon', 'type' );
    $param['value'][__( 'Reach Icons', 'reach-rdp' )] = 'reach_icons';
    $param['weight'] = 90;
    vc_update_shortcode_param( 'vc_icon', $param );
}

and

function reach_add_font_picker() {
    vc_add_param( 'vc_icon', array(
            'type'       => 'iconpicker',
            'heading'    => esc_html__( 'Icon', 'reach-rdp' ),
            'param_name' => 'icons_reach_icons',
            'settings' => array(
                'emptyIcon'    => false,
                'type'         => 'reach_icons',
                'iconsPerPage' => 20,
            ),
            'weight' => 80,
            'dependency' => array(
                'element'    => 'type',
                'value'      => 'reach_icons',
            ),
        )
    );
}

回答2:

I needed to achieve exactly the same thing - although the icon set I'm adding is selection of icons from the Font Awesome Pro set. Using the answer that almost worked above, here is my fully working version. This is tested and working in version 5.5.2 of WPBakery. I hope this helps someone!

// In the 'Icon library' dropdown for an icon content type, add a new family of icons.
function fapro_add_to_iconbox() {
    $param = WPBMap::getParam( 'vc_icon', 'type' );
    $param['value'][ __( 'FontAwesome Pro icons', 'js_composer' ) ] = 'fapro';

    vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'vc_after_init', 'fapro_add_to_iconbox', 40 );


// This adds a new parameter to the vc_icon content block.
// This parameter is an icon_picker element,
// that displays when fapro is picked from the dropdown.
function fapro_add_font_picker() {

    $settings = array(
        'type'        => 'iconpicker',
        'heading'     => __( 'Icon', 'js_composer' ),
        'param_name'  => 'icon_fapro',
        'settings'    => array(
            'emptyIcon'    => false,
            'type'         => 'fapro',
            'iconsPerPage' => 20,
        ),
        'dependency'  => array(
            'element' => 'type',
            'value'   => 'fapro',
        ),
        'weight'      => '1',
        'description' => __( 'Select icon from library.', 'js_composer' ),
    );

    vc_add_param( 'vc_icon', $settings );
}
add_filter( 'vc_after_init', 'fapro_add_font_picker', 50 );


// Add all the icons we want to display in our font family.
function vc_iconpicker_type_fapro( $icons ) {
    // Add custom icons to array.
    $fapro_icons = array(
        array( 'far fa-bacon' => 'Bacon' ),
        array( 'fas fa-hamburger' => 'Hamburger' ),
    );

    // Return icons.
    return $fapro_icons;
}
add_filter( 'vc_iconpicker-type-fapro', 'vc_iconpicker_type_fapro' );


// Enqueue the CSS file so that the icons display in the backend editor.
function enqueue_fapro_font() {
    wp_enqueue_style( 'agilechilli-font-awesome', 'https://pro.fontawesome.com/releases/v5.7.2/css/all.css' );
}
add_action( 'vc_backend_editor_enqueue_js_css', 'enqueue_fapro_font' );

来源：https://stackoverflow.com/questions/41912059/adding-new-icons-to-visual-composer

标签

php

wordpress

visual-composer