I’m trying to style the little down arrow in the navbar next to the Mortgage Info link. I’ve styled this sort of thing many times before but for some reason after I apply a class to it, the arrow seems to disappear and get replaced by a little box instead. I just want to make it the same white colour as the rest of the nav links.
That said, nowadays I don’t care anymore for the <i> element nor for icon-fonts, I put all my efforts into learning and mastering what really counts: SVGs!
So, how I do to custom the arrow of the dropdown menu:
I select the arrow, and I click on display:none, so it’s gone forever.
I add whatever SVG icon I want as a background, non repeat.
I position it where I want and adapt the padding of the menu item to make room for the icon.
That way you can even alter the position of the icon on :hover for example, of alter the visibility and display a second icon on :hover etc…
Thanks for the feedback…I’ll check out SVG’s. For now, I’ve figured out the problem was trying to style the icon rather than the toggle element. So all fixed. thanks.