Last active
October 7, 2020 08:17
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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' ); | |
} | |
} |
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
Example : Icon selector appear at the top maybe help you !
[](Link : https://stackoverflow.com/questions/41912059/adding-new-icons-to-visual-composer?rq=1 )