在 Visual COmposer 中添加自定义图标

Question

我正在尝试在 Visual Composer 中添加 icomoon 图标

define('P2P5_MAIN_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
 define('P2P5_MAIN_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
 define('P2P5_MAIN_PLUGIN_DIR', untrailingslashit( P2P5_MAIN_PLUGIN_PATH ));

 // Add new custom font to Font Family selection in icon box module
 function p2p5_add_new_icon_set_to_iconbox( ) {
  $param = WPBMap::getParam( 'vc_icon', 'type' );
  $param['value'][__( 'IcoMoon', 'total' )] = 'icomoon';
  vc_update_shortcode_param( 'vc_icon', $param );
 }
 add_filter( 'vc_after_init', 'p2p5_add_new_icon_set_to_iconbox', 40 );

 function p2p5_add_font_picker() {
  vc_add_param( 'vc_icon', array(
    'type' => 'iconpicker',
    'heading' => esc_html__( 'Icon', 'total' ),
    'param_name' => 'icon_icomoon',
    'settings' => array(
     'emptyIcon' => true,
     'type' => 'icomoon',
     'iconsPerPage' => 200,
    ),
    'dependency' => array(
     'element' => 'icon_type',
     'value' => 'icomoon',
    ),
   )
  );
 }
 add_filter( 'vc_after_init', 'p2p5_add_font_picker', 40 );

 add_filter( 'vc_after_init', 'p2p5_add_font_picker', 40 );

// Add array of your fonts so they can be displayed in the font selector
 function p2p5_icon_array($icons) {
  $icons['icomoon'] =  array(
   array('icomoon icon-food-light' => 'food'),
   array('icomoon icon-sport161' => 'sport'),
   array('icomoon icon-massage4' => 'massage'),
   array('icomoon icon-chairs16' => 'chair'),
   array('icomoon icon-relax43' => 'relax'),
   array('icomoon icon-excercise14' => 'excercise')
  );
  return $icons;
 }
 add_filter( 'vc_iconpicker-type-icomoon', 'p2p5_icon_array' );


 /**
  * Register Backend and Frontend CSS Styles
  */
 add_action( 'vc_base_register_front_css', 'p2p5_vc_iconpicker_base_register_css' );
 add_action( 'vc_base_register_admin_css', 'p2p5_vc_iconpicker_base_register_css' );
 function p2p5_vc_iconpicker_base_register_css(){
  wp_register_style('icomoon', P2P5_MAIN_PLUGIN_URL . 'assets/css/icomoon.css');
 }

 /**
  * Enqueue Backend and Frontend CSS Styles
  */
 add_action( 'vc_backend_editor_enqueue_js_css', 'p2p5_vc_iconpicker_editor_jscss' );
 add_action( 'vc_frontend_editor_enqueue_js_css', 'p2p5_vc_iconpicker_editor_jscss' );

 function p2p5_vc_iconpicker_editor_jscss(){
  wp_enqueue_style( 'icomoon' );
 }

 /**
  * Enqueue CSS in Frontend when it's used
  */
 add_action('vc_enqueue_font_icon_element', 'p2p5_enqueue_font_icomoon');
 function p2p5_enqueue_font_icomoon($font){
  switch ( $font ) {
   case 'icomoon': wp_enqueue_style( 'icomoon' );
  }
 }

我在选择图标系列时有Icomoon选项但是没有显示图标

我已经阅读了其他 post 并且没有看到我的错误 Adding new Icons to Visual Composer

我错过了什么？

Answer 1

希望这会有所帮助-

<?php
// Add new custom font to Font Family selection in icon box module
function zeckart_add_new_icon_set_to_iconbox( ) {
    $param = WPBMap::getParam( 'vc_icon', 'type' );
    $param['value'][__( 'IcoMoon', 'total' )] = 'icomoon';
    vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'init', 'zeckart_add_new_icon_set_to_iconbox', 40 );
// Add font picker setting to icon box module when you select your font family from the dropdown
function zeckart_add_font_picker() {
    vc_add_param( 'vc_icon', array(
            'type' => 'iconpicker',
            'heading' => esc_html__( 'Icon', 'total' ),
            'param_name' => 'icon_icomoon',
            'settings' => array(
                'emptyIcon' => true,
                'type' => 'icomoon',
                'iconsPerPage' => 200,
            ),
            'dependency' => array(
                'element' => 'type',
                'value' => 'icomoon',
            ),
        )
    );
}
add_filter( 'vc_after_init', 'zeckart_add_font_picker', 40 );
// Add array of your fonts so they can be displayed in the font selector
function zeckart_icon_array() {
    return array(
        array('icomoon icon-food-light' => 'food'),
        array('icomoon icon-sport161' => 'sport'),
        array('icomoon icon-massage4' => 'massage'),
        array('icomoon icon-chairs16' => 'chair'),
        array('icomoon icon-relax43' => 'relax'),
        array('icomoon icon-excercise14' => 'excercise')
    );
}
add_filter( 'vc_iconpicker-type-icomoon', 'zeckart_icon_array' );
/**
 * Register Backend and Frontend CSS Styles
 */
add_action( 'vc_base_register_front_css', 'zeckart_vc_iconpicker_base_register_css' );
add_action( 'vc_base_register_admin_css', 'zeckart_vc_iconpicker_base_register_css' );
function zeckart_vc_iconpicker_base_register_css(){
    wp_register_style('icomoon', get_stylesheet_directory_uri() . '/assets/icomoon/style.css');
}
/**
 * Enqueue Backend and Frontend CSS Styles
 */
add_action( 'vc_backend_editor_enqueue_js_css', 'zeckart_vc_iconpicker_editor_jscss' );
add_action( 'vc_frontend_editor_enqueue_js_css', 'zeckart_vc_iconpicker_editor_jscss' );
function zeckart_vc_iconpicker_editor_jscss(){
    wp_enqueue_style( 'icomoon' );
}
/**
 * Enqueue CSS in Frontend when it's used
 */
add_action('vc_enqueue_font_icon_element', 'zeckart_enqueue_font_icomoon');
function zeckart_enqueue_font_icomoon($font){
    switch ( $font ) {
        case 'icomoon': wp_enqueue_style( 'icomoon' );
    }
}

在 Visual COmposer 中添加自定义图标

Add custom Icon in Visual COmposer

wordpress

icons

visual-composer