i have added this class in css classes fa fa-lg fa-home in appearance > menu >secondary menu home.

but its icon is not showing correctly using font awesome, i want to show only icon instead of home text on both menus i.e primary top menu and secondary menu home button

The page I need help with: https://testfellow.com


This is because your the icon is being output outside of the anchors. To fix this issue, add another class, for example my-class to the menu classes. Now, try to position the icon absolutely, and fix the padding:

.fa.my-class::before {
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);

.fa.my-class {
     margin-left: 10px;
     padding-left: 10px;
     position: relative;
  • i have followed as u told;i m having alignment issue i want to put home icon in center when i see this icon on mobile it does not show properly pls check this link testfellow.com – zaiby Oct 15 '18 at 16:50
  • Have you added this CSS to your custom CSS? I can't see any style being added to your stylesheet. – Jack Johansson Oct 15 '18 at 16:56
  • I've also added a position:relative to the styles. That should fix the issue on mobile too. – Jack Johansson Oct 15 '18 at 16:58
  • yes i have added css to custom css – zaiby Oct 15 '18 at 16:59
  • everything is fine but the icon on navigation menu is not aligned in the center check the link now i have added the same – zaiby Oct 15 '18 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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