0

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.com/user/channel">YouTube</a>

0

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! – bldingbloks Jan 2 at 12:56

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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