[FIXED] How do I add fontawsome icon to wp_nav_menu?

Issue

How do I add fontawsome icon to footer menu i.e <ul><li><i class="fa-solid fa-arrow-up-right-from-square"></i> Category 1</li><ul> in a

<?php
   if ( has_nav_menu( 'business-menu' ) ) :
           wp_nav_menu( array(
               'theme_location' => 'business-menu',
               'items_wrap'     => '%3$s',
               'add_li_class'   => 'list-group-item d-flex justify-content-between align-items-center border-0',
               'container' => '',
           ));
       endif;
   ?>

above is what have tried but stacked, anyone to help?

Solution

I would advice not to include the whole library for just few icons, that definitely slows down the site a bit.

-- you would need just 5-10 icons and the best solution would be to use the css and attach the svg's to classes, and add up the class to individual nav items like.

<ul><li><i class="social"></i> Category 1</li><ul>

.social::before {
    content: '';
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
      background-repeat: no-repeat;
      background-size: 1rem 1rem;
      /* set positioning and others */
    }

You can get tons of svgs here: https://icons.getbootstrap.com/

and you can use the svgs in your html file as well, but just rendering them in a span tag.

Answered By - Naik Javaid

Answer Checked By - David Marino (PHPFixing Volunteer)