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' );
}
}
@Fixed-code5110
Copy link

Fixed-code5110 commented Apr 6, 2020

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

@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