This tutorial provides the steps to load the latest Font Awesome on the frontend in Oxygen and showing SVG icons to the left of nav menu items.

Step 1

Install and activate Code Snippets plugin.

Add a new Snippet to load the latest Font Awesome on the frontend having the following code:

add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
/**
 * Enqueue Font Awesome.
 */
function custom_load_font_awesome() {

    wp_enqueue_script( 'font-awesome-latest', '//use.fontawesome.com/releases/v5.3.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-latest' === $handle ) {
        $tag = str_replace( ' src', ' defer src', $tag );
    }

    return $tag;

}

Replace 5.3.1 with the current latest version which can be seen here.

Set the snippet to run on frontend.

Step 2

Create/edit your menu at Appearance > Menus.

Add the following sample HTML to the left of your menu label:

<span class="fas fa-home" aria-label="Home" role="img"></span>

Complete sample Navigation Label:

<span class="fas fa-home" aria-label="Home" role="img"></span> Home

Replace fas fa-home with the corresponding code for your desired icons which can be obtained by searching for the icon on Font Awesome site and going to its detail page.

Repeat this for other menu items.

Step 3

Add this CSS:

.menu-item a .svg-inline--fa {
    margin-right: 5px;
    padding-bottom: 1px;
}

Reference:

https://sridharkatakam.com/load-font-awesome-5-wordpress/

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: