[Resolved] Font Awesome Icons not Showing on Navigation (Menus)

[Claudio]

Hi,
I tried to post in this thread but there was no way to post Private Info.
I have basically the same problem, the single menu icon I added using font awesome (I installed the plugin) is not showing.
Please see images on the URL I sent you in the private info, I posted the photos there temporarily.
Thanks in advance.

[Leo]

Hi there,

I don’t believe this is a theme issue.

Can you activate a Twenty series WP theme to test and see if the issue occurs there?

Let me know 🙂

[Claudio]

Hi,
I activated theme Twenty Twenty-Two.
Basically the menu is gone, it’s jus a series of links. The “Help” link is the pone that was supposed to display the icon, but it’s not there (photo added to the homepage). Font Awesome works in other places of the website, but not on the menus.

[Fernando]

Hi Claudio,

Leo, is correct, this seems to be a Plugin issue and not a theme related one. Tried testing it on my test website with a different theme(Twenty Twenty Two as well), and the issue still exists: https://share.getcloudapp.com/geumwoZB

Alternatively, I found this which is working from my end: https://wptavern.com/how-to-add-font-awesome-icons-to-wordpress-menus

Hope this helps! 🙂

[Claudio]

Hi,

Thanks Fernando, I got the icons to display still using the FONT AWESOME plugin, by changing the settings of the plug in to Technology = WebFont and using this in the menu settings of WP:

Now if you look at my menu the icon and menu label in my website are not in line.
1. How to force them to be in line?
2. If I wanted to delete the menu item label and just leave the icon as a label, is there a way? (deleting the navigation label deletes the menu).
Thanks.

[Claudio]

The photo is not displaying, see link in Private info.
Basically, I only needed to write (for example for the user icon) fa fa-user into the CSS Classes field of the WP menu item.

[David]

Hi there,

try adding this CSS:

li.fa::before {
    position: absolute;
    left: 10px;
    top: 0.75em;
    z-index: 1;
}

[Claudio]

Hi David,
Thanks, it worked. I also added spacing between the menu items so they are evenly spaced:

.main-navigation .main-nav > ul > li:not(:last-child) {
	margin-right: 28px;
	}

One last thing is that I copied CSS styling from this support forum to make the dropdown menus have boxes and shadows.

/* Style the secondary navigation drop menus */
.secondary-navigation ul ul {
    border: 1px outset #222;
	border-color: #D3D3D3;
    border-top: 0;
    box-shadow: 0 5px 5px rgba(0,0,0,0.4);
}

.secondary-navigation ul ul:after {
    content: '';
    position: absolute;
    left: 60px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff;

It’s working, but:
1. Is there a way for the small triangle to “point” to the center of the secondary navigation menu item (for ex. RINGS, EARRINGS, etc).

2. The little triangle is appearing on the TOP of the sideways “drop-down” menu (ex. when hovering over “SHOP BY COLLECTION” > “Special Occasions”, “Compilations”, “Themed Jewelry”, “Top Materials”). Is there a way to make the triangle appear on the left side? If too hard, then how to remove the little triangle from the sideways “drop-down” menus?

[Ying]

Change this CSS:

.secondary-navigation ul ul:after {
    content: '';
    position: absolute;
    left: 60px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff;
}

to this:

@media (min-width: 769px) {
     .secondary-navigation .main-nav > ul >li:hover > a:after {
         content: '';
         position: absolute;
         left: 50%;
         bottom: 0;
         width: 0;
         height: 0;
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
         border-bottom: 8px solid #fff;
         transform: translatex(-50%);
    }
     .secondary-navigation .main-nav > ul >li > a {
          padding-left: 0;
          margin-left:45px;
    }
}

[Claudio]

Thank you very much Ying, that works.
Finally, the main navigation is set to sticky and while scrolling down the screen on PC:
1. the site logo disappears so the search bar, help and account menu entries shift all the way to the left. Is there any way to prevent this?
2. Also, during sticky mode, the help and user icons are no longer inline with their corresponding menu entries. Any CSS to fix this?
Thank you.

[Claudio]

Nevermind number 1 above: I fixed it.
Please check item no. 2 above and let me know. Thanks.

[Ying]

Change this CSS

li.fa::before {
    position: absolute;
    left: 15px;
    top: 0.75em;
    z-index: 1;
}

to:

li.fa::before {
    position: absolute;
    left: 15px;
    z-index: 1;
    top: 50%;
    transform: translatey(-50%);
}

[Claudio]

Thank you Ying, that solved the issue. Thank you and all the support staff, you are all top notch. I’m more than happy with GP Premium and the support received.
I’m marking this topic as resolved.

[Ying]

You are welcome Claudio 🙂

We are glad you are happy with our support!

[Author]

Posts