php 如何在WordPress中加载Font Awesome 5

Posted 2021-05-05

.entry-content ul.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 0;
}

.entry-content ul.nav > li {
    margin-right: 30px;
    list-style-type: none;
}

.entry-content ul.nav > li:last-child {
    margin-right: 0;
}

ul.nav li a {
    color: #333;
    text-decoration: none;
}

ul.nav .svg-inline--fa {
    margin-right: 8px;
}

<ul class="nav">
    <li class="home"><a href="#"><i class="fas fa-home"></i>Home</a></li>
    <li class="about"><a href="#"><i class="fas fa-info-circle"></i>About</a></li>
    <li class="contact"><a href="#"><i class="fas fa-envelope"></i>Contact</a></li>
</ul>

An alternative method is to simply paste

Copy to clipboard
<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

in your theme’s settings page in the Header section (if such an option is present).

https://fontawesome.com/how-to-use/svg-with-js has comprehensive info on how to use the new Font Awesome 5.

// https://sridharkatakam.com/load-font-awesome-5-wordpress/
// Font Awesome 5 was released 2 days ago. The main way of loading it has changed from a CSS file to a JS file with the move away from icon fonts to SVG.

// Font Awesome 5 has been recently released with SVG vector icons compared to the earlier icon fonts.

// To load Font Awesome 5+’s “SVG with JS” in your WordPress site, add the following in the active theme’s functions.php:

// Enqueue Font Awesome.
add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
function custom_load_font_awesome() {
    wp_enqueue_script( 'font-awesome', 'https://use.fontawesome.com/releases/v5.0.1/js/all.js', array(), null );
}

add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
/**
 * Filter the HTML script tag of `font-awesome` script to add `defer` attribute.
 *
 * @param string $tag    The <script> tag for the enqueued script.
 * @param string $handle The script's registered handle.
 *
 * @return   Filtered HTML script tag.
 */
function add_defer_attribute( $tag, $handle ) {
    if ( 'font-awesome' === $handle ) {
        return str_replace( ' src', ' defer src', $tag );
    }
}

// Replace 5.0.1 with the current latest version which can be seen at https://fontawesome.com/get-started/svg-with-js. This applies to the rest of the article as well.