This will tell you how to change, or add new FontAwesome icons to the main menu. Just a note before anyone asks. All of the other icons on the site, including the sidebar icons, are called for from either the system, or plugins, and are used site wide in various areas, so they shouldn't be changed. This is just for the main menu icons. You will notice the default icon is a puzzle piece. This displays if the menu item isn't already defined in the css file. 1. Go to the FontAwesome website. http://fontawesome.io/icons/ 2. Let's take the first icon under the "Web Applications" icon list "adjust". a. Click on the icon. This will take you to the icon page. b. Underneath the icon sizes you will see. "fa-adjust · Unicode: f042 · Created: v1.0 · Categories: Web Application Icons " c. What you are interested in here is the unicode "f042". This is the code that we will use to display that icon. 3. Go to your site. 4. Right click on the menu item you are wanting to work with, and choose inspect element. 5. You will see a box pop up at the bottom of the screen, and that menu item will be selected. 6. What you are wanting here is the
  • class. 7. Let's say we right clicked on the "Main" item. a. Here is what you are looking for "
  • ". b.From that you are wanting the class "base_main_menu_index" 8. From that point it's easy. We have our unicode, and we have our
  • class. 9. Here is the format that you can add to the custom css in the admin panel for the theme. .base_main_menu_index a::before { content: "\f042" !important; } 10. This will add the "adjust" icon we selected from the FontAwesome site to the "Main" menu item.