wordpressiconsvisual-composer

Add custom Icon in Visual COmposer


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

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

I've read this other post and don't see my error Adding new Icons to Visual Composer

What did I miss?


Solution

  • Hopefully that will help-

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