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">
<a target="_blank" href="http://www.youtube.com/user/channel">YouTube</a>


1 Answer 1


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>
  • I am already doing this, but you reminded to add the proper prefix of fab etc to the html label and it resovled my issues, thank you! Commented Jan 2, 2019 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.