Add a custom icon set from icomoon to visual composer vc_icon shortcode

vc_custom_icon_set.php

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

@zecka
Ooooh i thought i would fint it in the same place than the others icons set !! So if not, where can i find my own and how can i use it ?

I have re-exported my icons with these params.

thank you for your example !! I had forgotten the ".json" file...
There is just one thing i don't understand in your code :
wp_register_style('icomoon',plugin_dir_url( __FILE__ ) . 'icomoon/style.css');
I think i am supposed to replace " FILE" with the path of a file from wpbakery..... But which one ?

Nope. __FILE__ is a magic constant, take a look:
https://www.php.net/manual/en/language.constants.predefined.php (English)
https://www.php.net/manual/fr/language.constants.predefined.php (French)
And don't worry about .json file you don't need it.

Hi, this is awesome! Exactly what I was looking for :-)

Here is a functional example (plugin)
https://github.com/zecka/icomoon-visual-composer

Does this work with the WP Bakery Page builder (Visual Composer)?
Where exactly should the new icons appear? should the new icons appear in the list in the "Icon" element? Or does it bring a dedicated element?

Thanks for any help.
Dan

Hi,

In which folder should I put the file icomoon-visual-composer.php? Thanks in advance.

It is a plugin, you should place the entiere folder inside wp-content/plugins ans of course adapte the plugin with own icon set

It is a plugin, you should place the entiere folder inside wp-content/plugins ans of course adapte the plugin with own icon set

WordPress is a little obscure for me ... I use your template (as is). It works, the plugin is available in WPBakery and I can choose an icon. But when I display the page, I have an 500 error. PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes) in /wp-includes/class.wp-dependencies.php on line 295

It's hard for me to help you, this error can come from different sources.
Try the classic debugging processes.

!!! MAKE A FULL BACKUP OF YOUR WEBSITE !!!

Disable the plugins one by one and see if the error disappears.
If the error disappears you will have identified the plugin that creates the problem

Switch theme
If the error disappears you will have identified if this error come from your theme

Or send me an export of your site with all in one wordpress migration. I will take a look when I have some time.

Example : Icon selector appear at the top maybe help you !

[](Link : https://stackoverflow.com/questions/41912059/adding-new-icons-to-visual-composer?rq=1 )

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



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', 40 );


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 $fapro_icons;
}
add_filter( 'vc_iconpicker-type-fapro', 'vc_iconpicker_type_fapro' );


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

Hello I try to use a similar code to add some Flaticons to the iconpicker but on my theme (Taalem) it seems doesnt work?
WPB V.C. version 6.2.0