Skip to content

Instantly share code, notes, and snippets.

@al5dy
Forked from zecka/vc_custom_icon_set.php
Created February 13, 2017 16:00
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save al5dy/b1c819ee95c0f9d77c6eba23e2e5e2f9 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' );
}
}
@dchesnick
Copy link

dchesnick commented May 29, 2018

Hey. I'm struggling to incorporate a custom set of icons into visual composer and I'm hoping you can help. I've followed the directions from icomoon, but the icons / font family doesn't show up within the visual composer icon selectors. Am I correct that the above php file is designed to facilitate that accessibility within VC? Or is there something else I am missing? Do I create this file an place it within the main child theme folder? Do I need to customize it in some way? can you help me understand how??? Any help you can provide would be appreciated.

@rockyahmed
Copy link

When i add this code then delete vc plugin then full site are problem and when i remove this code form my file everything is working well.

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