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)
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.
Use text-indent: -9999px; in css code to hide text. http://css-tricks.com/almanac/properties/t/text-indent/
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.
You must be logged in to reply to this topic.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.