HTML in menu navigation labels

What's the suggested best practice for placing icons as menu navigation labels where you don't want any text and just want the icon. For example a social media icon.

Of course you can define CSS classes, but leaving the navigation label text blank removes the item on save.

This text in the Navigation Label works:

<div class="social-icons size-small"><span class="icon-facebook"></span></div>

then adding additional CSS in the CSS classes box.

But does this pose any issue, or is there a much better "best practice" way of doing this which is SEO friendly?

  • Ash

    Hello @John

    Welcome to WPMU community!

    I hope you are well today and thanks for asking the question.

    Well, I think you can simple add a text like Facebook as a menu item. Add an extra class for that menu , like fb-icon.

    Now try the following css:

    .fb-icon{
    background: url(path/to/image) 50% 50% no-repeat;
    text-indent: -9999px;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Let me know if that works for you.

    Cheers
    Ash

    • John

      Thanks Ash,

      We've got a child theme up and running we can put these amendments in.

      Your solution would work if the facebook icon was an image but the icon is loaded as a font (ie font-awesome or icomoon) so i don't think can't be called as background in the CSS. I notice the indent also creates a new line within the div which will cause a further issue.

      Is there a way of indenting or better not showing only label part of the text, leaving the icon in place if you call it. Perhaps like this?

      .fb-icon {
      position:relative;
      }
      .fb-icon:before {
      position:absolute;
      font-family: iconmoon;
      top:0;
      left:-2px;
      content: "\e600";
      }

      Can the text be made invisible with the before pseudo tag visible (without affecting spacing)?

      John

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.