php - Bring Font Awesome icons inside menu A tags

admin管理员组

文章数量:1130349

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>

• php
• menus
• javascript
• css

Share Improve this question edited Jan 2, 2019 at 12:54 bldingbloks asked Jan 2, 2019 at 12:33 bldingbloksbldingbloks 333 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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'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>

• php
• menus
• javascript
• css

Share Improve this question edited Jan 2, 2019 at 12:54 bldingbloks asked Jan 2, 2019 at 12:33 bldingbloksbldingbloks 333 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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>

本文标签： phpBring Font Awesome icons inside menu A tags