-
-
Save webdevsuperfast/eb413e53d5a135229c8cd088ea996d69 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 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' ); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
thank you for the nice code.
I'm using it right now. The font and the icons are presented in VC. e see the new icons but the icon is not loaded in frontend when I choose to use it. the css-classes are not added.
/** Last tag save by WC for icons. The css-classes of icomoon or fontawesome failed **/ <span class="vc_icon_element-icon "></span>
should i add more js or css?
Regards.