Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I recently added a custom menu link to my primary navigation. By default, a calendar icon shows up next to it (I’m not sure why). I’m trying to figure out how to change the icon. I found another thread that suggested some custom CSS (in which I am not well-versed), but it also said that that code no longer works. I also tried adding the Menu Icons plugin, but that added a second menu icon to all of my menu links. It did not override the icon that was already showing up for the custom menu link.
Any advice?
Hi Thesixthpoint
Thanks for your question.
Go to Pages and edit the page that the menu item is associated with. There is a menu icon drop down menu in the right column, the menu icon is most likely being set there.
The menu item in question is not a page. It is a custom link.
Thanks.
Vantage only offers menu icons for pages. When you edit a page you’ll find a menu icon drop down menu in the right column. If you’d like to add menu icons for custom links you’d need to use a plugin like Menu Icons:
https://wordpress.org/plugins/menu-icons/
In your Custom CSS you have the following:
.main-navigation .icon:before { content: "\f073"; font-family: FontAwesome; }This rule is adding the calendar icon.
When I tried the Menu Icons plugin, it added a second icon instead of replacing the calendar icon with the one I selected.
Someone at SiteOrigin helped me add that custom CSS for a different menu item issue I was having a while back. Is there a way to modify the code so that it specifies the calendar icon for the Calendar link and a different icon for the new link? (As opposed to just automatically adding the calendar icon to any link.)
Sure, Menu Icons would indeed add another icon, it doesn’t have the power to change your Custom CSS which remains so you’d land up with two.
We recommend removing the Custom CSS we highlighted above which will remove the icon and then just using Menu Icons. That’ll give you total control without the need for CSS.