在Visual COmposer中添加自定义图标

Posted 2021-04-12

我正在尝试在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选择，但没有图标显示。

我已经阅读了这篇文章，并没有看到我的错误Adding new Icons to Visual Composer

我错过了什么？

答案

希望这会有所帮助 -

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