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:

    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.


    • 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 {
      .fb-icon:before {
      font-family: iconmoon;
      content: "\e600";

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


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.