Home Forums Themes Support How to add new Icons library in WP Bakery Page Builder and Mega Menu

This topic contains 0 replies, has 1 voice, and was last updated by  admin 2 months, 2 weeks ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #2919

    Hi all customer,

    In this topic tutorial we’ll help you add new Icons library in WP Bakery Page Builder and Mega Menu in our theme.

    In this example  we’ll add IcoFont: https://icofont.com/icons

    Please download font and add in wp-content/themes/xxx/assets/libraries/ or you can use external URL.

    (xxx is name of our theme)

    1. Add new font for both Admin and Frontend

    – Add font for admin:

    + Go to wp-content/themes/xxx/framework/includes/ then open file enqueue-admin.php

    + Add this code in function haru_admin_enqueue_scripts:

    $url_font_ico = get_template_directory_uri() . '/assets/libraries/icofont/css/icofont.css';
    wp_enqueue_style( 'icofont', $url_font_ico, array());

    Similar open file enqueue-frontend.php and add this code for function haru_enqueue_styles:

    $url_font_ico = get_template_directory_uri() . '/assets/libraries/icofont/css/icofont.css';
    wp_enqueue_style( 'icofont', $url_font_ico, array());

    2. Add new Icon library in WP Bakery Page Builder (Visual Composer)

    – Go to wp-content/themes/xxx/framework/vc_extension then open file functions.php

    Add new function like this:

    // Add new font icon
    /**
    * Register Backend and Frontend CSS Styles
    */
    add_action( 'vc_base_register_front_css', 'haru_vc_iconpicker_base_register_css' );
    add_action( 'vc_base_register_admin_css', 'haru_vc_iconpicker_base_register_css' );
    function haru_vc_iconpicker_base_register_css(){
    wp_register_style('icofont', get_template_directory_uri() . '/assets/libraries/icofont/css/icofont.css');
    }
    /**
    * Enqueue Backend and Frontend CSS Styles
    */
    add_action( 'vc_backend_editor_enqueue_js_css', 'haru_vc_iconpicker_editor_jscss' );
    add_action( 'vc_frontend_editor_enqueue_js_css', 'haru_vc_iconpicker_editor_jscss' );
    function haru_vc_iconpicker_editor_jscss(){
    wp_enqueue_style( 'icofont' );
    }
    /**
    * Define the Icons for VC Iconpicker
    */
    
    add_filter( 'vc_iconpicker-type-icofont', 'vc_iconpicker_type_icofont' );
    function vc_iconpicker_type_icofont( $icons ) {
    $icofont_icons = array(
    array('icofont icofont-addons' => 'icofont-addons'),
    array('icofont icofont-address-book' => 'icofont-address-book'),
    array('icofont icofont-adjust' => 'icofont-adjust'), // You can add other icon similar
    
    );
    
    return array_merge( $icons, $icofont_icons );
    }

    3. Use new Icon library in WP Bakery Page Builder (Visual Composer)

    In this example we’ll use IconBox shortcode.

    Go to wp-content/plugins/haru-xxx-core/shortcodes/icon-box then open file icon-box.php

    Add param to use font:

    array(
    'type' => 'dropdown',
    'heading' => esc_html__( 'Icon library', 'haru-xxx' ),
    'value' => array(
    esc_html__( 'Font Awesome', 'haru-xxx' ) => 'fontawesome',
    esc_html__( 'Open Iconic', 'haru-xxx' ) => 'openiconic',
    esc_html__( 'Typicons', 'haru-xxx' ) => 'typicons',
    esc_html__( 'Entypo', 'haru-xxx' ) => 'entypo',
    esc_html__( 'Linecons', 'haru-xxx' ) => 'linecons',
    esc_html__( 'Icofont', 'haru-xxx' ) => 'icofont',
    ),
    'admin_label' => true,
    'param_name' => 'type',
    'description' => esc_html__( 'Select icon library.', 'haru-xxx' ),
    ),
    
    array(
    'type' => 'iconpicker',
    'heading' => esc_html__( 'Icon', 'haru-xxx' ),
    'param_name' => 'icon_icofont',
    'value' => 'icofont icofont-addons', // default value to backend editor admin_label
    'settings' => array(
    'emptyIcon' => false, // default true, display an "EMPTY" icon?
    'type' => 'icofont',
    'iconsPerPage' => 4000, // default 100, how many icons per/page to display
    ),
    'dependency' => array(
    'element' => 'type',
    'value' => 'icofont',
    ),
    'description' => esc_html__( 'Select icon from library.', 'haru-xxx' ),
    ),

    Display icon at frontend:

    Go to wp-content/plugins/haru-xxx-core/templates/icon-box/ then open file style_1.php

    Add this code:

    vc_icon_element_fonts_enqueue( $type );
    $iconClass = isset( ${'icon_' . $type} ) ? esc_attr( ${'icon_' . $type} ) : 'fa fa-adjust';

    You can display icon by this code:

    <?php echo $iconClass; ?>

    4. Use new Icons in Mega Menu

    Go to wp-content/themes/xxx/framework/core/megamenu/assets/js then open file megamenu-admin.js

    Go to line 21 you can add new menu icon here like this:

    var list = [
    "icofont icofont-aids",
    
    "icofont icofont-ambulance",
    
    "icofont icofont-autism", // Similar with other icons
    
    ];

    Hope this help!

     

    *****

    Best regards,

    HaruTheme

     

     

    • This topic was modified 2 months, 2 weeks ago by  admin.
    • This topic was modified 2 months, 2 weeks ago by  admin.
    • This topic was modified 2 months, 2 weeks ago by  admin.
    • This topic was modified 2 months, 2 weeks ago by  admin.
    • This topic was modified 2 months, 2 weeks ago by  admin.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.