December 10, 2017 (updated Dec. 11, 2017) by Sridhar Katakam
.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.