Font Awesome Icons not Showing on Navigation (Menus)

This topic has 13 replies, 5 voices, and was last updated 4 years, 1 month ago by Ying.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
March 22, 2022 at 9:34 am #2163719

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.

March 22, 2022 at 9:45 am #2163739

Leo
Staff
Customer Support

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 🙂

March 23, 2022 at 12:40 am #2164344

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.

March 23, 2022 at 1:24 am #2164368

Fernando
Customer Support

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! 🙂

March 23, 2022 at 3:14 am #2164450

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.

March 23, 2022 at 3:19 am #2164461

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.

March 23, 2022 at 6:11 am #2164613
David
Staff
Customer Support
Hi there,

try adding this CSS:
```
li.fa::before {
    position: absolute;
    left: 10px;
    top: 0.75em;
    z-index: 1;
}
```
March 23, 2022 at 9:10 am #2164948
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?
March 23, 2022 at 9:57 am #2164993
Ying
Staff
Customer Support
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;
    }
}
```
March 24, 2022 at 7:24 am #2165882

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.

March 24, 2022 at 8:03 am #2166092

Claudio

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

March 24, 2022 at 9:24 am #2166199
Ying
Staff
Customer Support
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%);
}
```
March 24, 2022 at 10:48 am #2166294

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.

March 24, 2022 at 11:07 am #2166317

Ying
Staff
Customer Support

You are welcome Claudio 🙂

We are glad you are happy with our support!
Author

Posts