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?
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.