I added the custom CSS code, given in another thread, that adds a Font Awesome icon to Link menu items. While this works perfectly on desktop browsers, mobile browsers (or anything that collapses the responsive theme to a mobile layout) do not show the icon in the menu. Any suggestions?
.main-navigation div > ul > li.menu-item-110 > a:before {
content: "f0f2";
color: #CCCCCC;
display: inline-block;
font-family: FontAwesome;
font-size: 16px;
line-height: 0.5em;
margin-right: 15px;
}
Hi Jeffrey
I wrote that before I realised there was this awesome plugin out there:
https://wordpress.org/plugins/menu-icons/
I just tested it with our mobile menu and it works perfectly. Once installed head to Appearance > Menus, each item in the menu will have the option to add an icon.
Hopefully you’re happy going this direction, I think it works really well.
Andrew,
Thanks, I got this working successfully. For anyone else reading this, you can use a console in a browser to examine the CSS hierarchy of the added icons and then add right-margins (15px) to get them to look similar to the way that Vantage does it.
Super, glad that helped. Thanks for adding that little bit on padding/margin. All the best.
(For anyone wanting a quick overview on Custom CSS and your browser’s developer tool, here is our tutorial:
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/)