Dashicons instead of text for navigation?

[merlene]

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)

[Davinder Singh Kainth]

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

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[merlene]

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.

[Davinder Singh Kainth]

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

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[quickquestion]

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,

[Author]

Posts