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

how to show icon in html

Hello ! Thank you for this code ! I'm a graphic designer and I don't understand a word in php, so i've stupidly copy and paste your code in the functions.php of my theme... But it doesn't work at all :(

Could you please help me ? It's been litteraly tearing my hair out for 3 days now....

My custom font from icomoon is in this folder (with the other fonts of wpbakery) : /wp-content/plugins/js_composer/assets/css/lib/icomoon
and here is my code...

`// 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-haltere' => 'haltere'),
array('icomoon icon-bebe' => 'bebe'),
array('icomoon icon-coeur' => 'coeur'),
array('icomoon icon-cible' => 'cible'),
array('icomoon icon-chrono' => 'chrono'),
array('icomoon icon-gym' => 'gym')
);
}
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() . '../plugins/js_composer/assets/css/lib/icomoon/icomoon.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' );
  }
  }
  `

@Alyssaa-Mary The path to your css file is wrong. The path you wrote is: wp-content/themes/your-theme/plugins/...

So first, move icomoon folder inside your theme (if it's not your theme use a child theme or you will loose your work on theme update)
then change the path of css file inside zeckart_vc_iconpicker_base_register_css function
wp_register_style('icomoon', get_stylesheet_directory_uri() . '/icomoon/style.css');

@zecka Thank you for your quick answer !

I've moved the folder in my child theme like you said. I've also moved the code from the parent theme to my child theme (still in the functions.php file). But the new library does not appear... :(

@Alyssaa-Mary
The icon selector does not appear in the same place as for the other icon libraries. This is the last field displayed.
I didn't find a way to display it in the right place.

Maybe your setting in icomoon export doesn't match with the code,
Make sure to check "use a class" in css selector and use ".icomoon" class

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

@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