This is in reply to a question posted by @JakesMaps on Pinegrow’s Slack #starter-theme about adding icons to Wordpress menu items. Decided to post it here as its less likely to disappear.
So I’m assuming that you’ve added FontAwesome to your project in Pinegrow.
First add a new class in your stylesheet in Pinegrow with the following:
/*** CONTACT MENU ICON ***/
.contact-link-icon a:before {
font-family: FontAwesome;
display: inline-block;
padding-right: 6px;
vertical-align: middle;
}
.contact-link-icon a:before {
content: "\f003";
}
Exported your theme then install and activate it in Wordpress and all that has to happen now is display an icon for whatever menu items require them.
So click Appearances > Menus and select the menu you want to add icon(s) to menu items:
Then click on Screen Options in the top right corner:
this will display a list of options you can activate, tick the box beside CSS Classes. Now when you add or edit a menu item there will be a box called CSS Classes available for you to add your css class.
In my example I want to add an envelope beside the menu text “Contact” by adding a class called contact-link-icon
Save the change to the menu and visit the fronted of your website and you should now have the icon displaying beside the menu item. This is what it looks like:
To add different icons to different menu items just duplicate the above code in your stylesheet and follow the same steps, changing the name of the CSS Class, for example .contact-link-icon a:before could change to .home-link-icon a:before then adding .home-link-icon to the Home menu item in the Wordpress Menu item.
Hope this makes sense and is helpful to someone at some stage.
