How to add Font Awesome icons to nav menu items in Oxygen

Update on April 18, 2020: Follow this instead.

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: