在Visual COmposer中添加自定义图标 [英] Add custom Icon in Visual COmposer

问题描述

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

I'm trying to add icomoon icon in Visual Composer

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选项，但没有图标显示.

I have the Icomoon choice in the selection of icon family but no icon shows.

我已经阅读了另一篇文章，没有看到我的错误添加新图标到Visual Composer

I've read this other post and don't see my error 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' );
    }
}

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