I'm using the underscores _s bare bones theme and have made a second menu for which I've added font-awesome classes to the optional CSS-classes for the menu's navigation labels to produce icons appearing alongisde the label text, which is as desired.
What i noticed however is that the icons themselves, whilst appearing as part of the menu's li tag, appear before the a tag begins, and the label itself appears inside the a tag. This is problematic as what I'm aiming for is a font-awesome only menu which I can easily adjust from the back end, for this I need the icons to be clickable, and I need the navigation label text to not be present in the front end.
so my question is how do I move the icons to be inside the the a tags rather then outside and how do I ensure the navigation label text is not present in the front end? I am not a coder however, I've just dabbled in it here and there, any help would be highly appreciated.
edit - font awesme icons appear as part of li css classes, but still outside of a class
possible solution could be retrieve the font-awesome class from the li classes and ADD it to the menu's a classes? the font awesome classes appear as the first class listed for the li classes.
below is the front-end source code for the menu -
<div class="custom-menu-class">
<ul id="menu-socials" class="menu">
<li id="menu-item-86" class="fab fa-youtube menu-item menu-item-type-custom-menu-item-object-custom menu-item-86">
::beofre
<a target="_blank" href="">YouTube</a>
I'm using the underscores _s bare bones theme and have made a second menu for which I've added font-awesome classes to the optional CSS-classes for the menu's navigation labels to produce icons appearing alongisde the label text, which is as desired.
What i noticed however is that the icons themselves, whilst appearing as part of the menu's li tag, appear before the a tag begins, and the label itself appears inside the a tag. This is problematic as what I'm aiming for is a font-awesome only menu which I can easily adjust from the back end, for this I need the icons to be clickable, and I need the navigation label text to not be present in the front end.
so my question is how do I move the icons to be inside the the a tags rather then outside and how do I ensure the navigation label text is not present in the front end? I am not a coder however, I've just dabbled in it here and there, any help would be highly appreciated.
edit - font awesme icons appear as part of li css classes, but still outside of a class
possible solution could be retrieve the font-awesome class from the li classes and ADD it to the menu's a classes? the font awesome classes appear as the first class listed for the li classes.
below is the front-end source code for the menu -
<div class="custom-menu-class">
<ul id="menu-socials" class="menu">
<li id="menu-item-86" class="fab fa-youtube menu-item menu-item-type-custom-menu-item-object-custom menu-item-86">
::beofre
<a target="_blank" href="http://www.youtube/user/channel">YouTube</a>
What I have tried in the past is to place the Font-awesome code with class name in the label field and remove any current labels. Instead of using the optional class field, this worked for me in the past. I have not tried it lately, so I am not sure if this still works.
For example the following code would be placed in the label.
<i class="far fa-address-card"></i>