How to Add Custom Font Icons Library?

Hongo theme provides Font Awesome, Et-line, and Themify Icons by default. Despite of these fonts, if you want to add more custom icons, please add below code in your child theme to have extra icons.

Step 1: Download your icons fonts zip file/folder and unzip it.

Step 2: Look for the font files which will have formats like: .eot, .ttf/.otf, .woff, .woff2, .svg.

Step 3: Upload this font files into your theme’s folder “wp-content/themes/your-theme/assets/fonts/”.

Step 4: Upload css files your theme’s folder “wp-content/themes/your-theme/assets/css/”.

Step 5: You want to add custom icons css than Open functions.php file from your child theme directory and add below code.

if( ! function_exists( 'hongo_child_custom_style' ) ) {
    function hongo_child_custom_style() {        
        wp_register_style( 'custom-child-icon', get_template_directory_uri() . '/assets/css/xxxxx.css' );
        wp_enqueue_style( 'custom-child-icon' );
    }
}
add_action( 'wp_enqueue_scripts', 'hongo_child_custom_style');
add_action( 'admin_enqueue_scripts', 'hongo_child_custom_style' );

Step 6: Open functions.php file from your child theme directory and add below code. Suppose you want to add more icons then you just need to add multiple icons list like below code.

if( ! function_exists( 'hongo_child_admin_custom_scripts' ) ) {
    function hongo_child_admin_custom_scripts() {
        wp_register_style( 'mfgicon-set', get_template_directory_uri() . '/assets/css/icon-css/mfglabs_iconset.css' );
        wp_enqueue_style( 'mfgicon-set' );
    }
}

add_action( 'wp_enqueue_scripts', 'hongo_child_admin_custom_scripts');
add_action( 'admin_enqueue_scripts', 'hongo_child_admin_custom_scripts' );

if( ! function_exists( 'hongo_child_custom_icons' ) ) {
    function hongo_child_custom_icons( $custom_icons ) {
        $custom_icons = array(
        		array(
        			'label' => __( 'Custom Icons 1', 'text-domain'),
        			'fonts' => array ( 'icon-cloud', 'icon-at', 'icon-plus', 'icon-arrow_up', 'icon-arrow_down' ) 
        		),
        		array(
        			'label' => __( 'Custom Icons 2', 'text-domain'),
        			'fonts' => array ( 'icon-arrow_right', 'icon-arrow_left', 'icon-chevron_down', 'icon-chevron_up' ) 
        		)
        	);
        return $custom_icons;
    }
}
add_filter( 'hongo_custom_font_icons', 'hongo_child_custom_icons' );

Note : You can see list in Go to admin panel > Appearance > Menus and Hongo Shortcode icon list.

SCROLL UP