How to Add Custom Font Icons Library?

Litho theme provides Font Awesome, Et-line, and Themify Icons by default. Despite 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 these font files into your theme’s folder “wp-content/themes/your-theme/assets/fonts/”.

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

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

if( ! function_exists( 'litho_child_custom_style' ) ) {
    function litho_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', 'litho_child_custom_style');
add_action( 'admin_enqueue_scripts', 'litho_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( 'litho_child_admin_custom_scripts' ) ) {
    function litho_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', 'litho_child_admin_custom_scripts');
add_action( 'admin_enqueue_scripts', 'litho_child_admin_custom_scripts' );

if( ! function_exists( 'litho_child_custom_icons' ) ) {
    function litho_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( 'litho_custom_font_icons', 'litho_child_custom_icons' );

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