How to add extra Custom icons in your website?

• Knowledgebase > Miscellaneous

POFO 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.

<?php
if( ! function_exists( 'pofo_child_custom_style' ) ) {
    function pofo_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', 'pofo_child_custom_style');
add_action( 'admin_enqueue_scripts', 'pofo_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.

<?php
if( ! function_exists( 'pofo_child_custom_icons' ) ) {
    function pofo_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( 'pofo_custom_font_icons', 'pofo_child_custom_icons' );
?>