向 Visual Composer 添加新图标 [英] Adding new Icons to Visual Composer

问题描述

我正在尝试向 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.

任何帮助将不胜感激.

// 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' );
}

推荐答案

我需要实现完全相同的目标 - 尽管我添加的图标集是从 Font Awesome Pro 集中选择的图标.使用上面几乎有效的答案，这是我的完整工作版本.这在 WPBakery 的 5.5.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' );

这篇关于向 Visual Composer 添加新图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！