Display FA icons in menus without text

  • Resolved Abaloo

    (@abaloo)


    10 years, 3 months ago

    Hi. I have read your instructions and added the following to my css file:

    .fontawesome-text { display: none; }

    …and in the wordpress menu I have added the correct font awesome CSS (fa-facebook). I have no text in the navigation label (as I want it to be blank) and the box to include a space is checked in the plugin settings.

    Yet the icon displays on my front end menu but without a link to anything – it’s just the icon but the link I have entered in the menu in wp-admin is not working.

    Hope that you can help.

    Very best wishes, Andrew.

    https://www.ads-software.com/plugins/font-awesome-4-menus/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Joe Ponzio

    (@new-nine)

    You should put the text into your navigation label. Setting .fontawesome-text {display:none;} will make sure that it’s just an icon. But without setting the text in the navigation label, WordPress assumes you don’t want a link.

    Let me know if that helps.

    I used that css in my child theme too, and it worked. with some updates now its stopped working and the menu text has reappeared, making my clients web site header navigation look awful. I happen to be using the Avada theme which also uses fontawesome icons, but they offer no support with this.

    https://www.caribbeancoffee.com/

    this is a high profile site and I need to fix this ASAP.

    I’m having the same issue! .fontawesome-text {display:none;} is no longer working.

    I’m having the same issue! .fontawesome-text {display:none;} is no longer working. Please Help us!

    Plugin Author Joe Ponzio

    (@new-nine)

    Can you post a link to your site?

    Hi. My site is: https://www.navalcarnero.es The text to hide is “Inicio” in home icon.
    Thanks a lot.

    I need show the home icon only but the others menu items must show the text and I don′t know how to do it. I use white space in the title of the menu items and works but the menu options for mobile appear white.

    Thanks for your help.

    Plugin Author Joe Ponzio

    (@new-nine)

    For your menu, the home menu item has an id of menu-item-358 which you can target to hide just the text for that particular item. Use this in your css:

    #menu-item-358 .fontawesome-text {display: none;}

    That will hide the text just for that particular menu item. Good luck!

    Thanks for your help, work very well.
    My five stars for your plugin.

    Plugin Author Joe Ponzio

    (@new-nine)

    Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Display FA icons in menus without text’ is closed to new replies.