简体   繁体   中英

Trying to add fontawesome icon to header in wordpress theme

Im trying to add an icon to the left of the main header in my wordpress theme, the code is in php and thats something that I'm not familiar with. I've used filezilla to get the header file from the theme. Is there anywhere in this code that I can put in the icon or do I need to do this in custom-header.php? The icon I was trying to add is like this <i class="fa fa-cogs"></i>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">

    <header id="masthead" class="site-header" role="banner">
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <h1 class="menu-toggle"><?php _e( 'Menu', 'padhang' ); ?></h1>
            <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'padhang' ); ?></a>

            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #site-navigation -->

        <div class="site-branding">

            <?php if ( get_header_image() ) : ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                    <img class="site-logo" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php bloginfo( 'name' ); ?>">
                </a>
            <?php endif; ?>

            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div>
    </header><!-- #masthead -->

    <div id="content" class="site-content">

Simpley you need to enque Font Awesome CSS in your theme's function.php file to load it. And use it in HTML using fa fa-icon Form of syntax.

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
    wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0 /css/font-awesome.min.css' );
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM