Dashicons instead of text for navigation?

Community Forums Forums Design Tips and Tricks Dashicons instead of text for navigation?

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  quickquestion 7 months, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #93960

    merlene
    Participant
    Post count: 7

    I would like to use Dashicons to replace the text in the header custom menu widget in a Genesis theme (specific theme is Centric but I’m sure whatever solution would work for others as well).

    When I use classes in css (and the menu button area) I do get the dashicons showing up but I still get the text label as well (if I don’t put anything in the text label in the menu builder it just vanishes).

    I’ve moved the text with the text-indent: -9999px trick but any submenu items seem to fall off the edge of the page after that and i’m pretty stumped. I’ve done keyword searches in this forum and Google and have found several tutorials that have the dashicon+text in the menu but I just want to use the icons.

    I realize also that I can use individual images to get the result – I’m trying to do this specifically with dashicons and not image files. I’d link to the site but it’s not live (running WAMP)

    #94246

    Davinder Singh Kainth
    Participant
    Post count: 1463

    Check this – http://wpsites.net/web-design/add-icons-to-nav-menu-items-in-studiopress-themes/


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #94285

    merlene
    Participant
    Post count: 7

    Thanks Davinder, I can get the dashicons to work with text like in that example but I’m running into trouble getting rid of the text – ideally I just want the dashicons images (Home, Email, etc.) without the text/words beside them.

    #95085

    Davinder Singh Kainth
    Participant
    Post count: 1463

    Use text-indent: -9999px; in css code to hide text. http://css-tricks.com/almanac/properties/t/text-indent/


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #102629

    quickquestion
    Participant
    Post count: 5

    Hi Marlene,

    Did you solve this?

    I tried the text-indent trick, but it moves the dashicon too. (I think because dashicons count as fonts, not images).

    The trick seems to work if you use css classes to add an image icon – I didn’t have any luck with dashicons though.

    Thanks,

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

You must be logged in to reply to this topic.