Skip to content

Instantly share code, notes, and snippets.

@zecka
Last active October 7, 2020 08:17
Show Gist options
  • Save zecka/51098c700191b97d2fc70d199d0fc807 to your computer and use it in GitHub Desktop.
Save zecka/51098c700191b97d2fc70d199d0fc807 to your computer and use it in GitHub Desktop.
Add a custom icon set from icomoon to visual composer vc_icon shortcode
<?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' );
}
}
@maxxdesignvc
Copy link

maxxdesignvc commented Sep 30, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment