This tutorial shows how to change Font Awesome icons in WordPress template.
WordPress. How to change Font Awesome icons
1. Usually Font Awesome icons are used for menu items in WordPress themes. Screenshot of fonts you can find below.
2. In order to change icons you need to go to Appearance->Menus section. Be sure to enable CSS Classes in Screen Options.
3. In our case the following class is set to menu item: color-1 icon-home. First class color-1 defines color of font, second class icon-home defines icon itself. Please check the screenshots below.
4. Let’s change icon. Please open the following link: http://fortawesome.github.io/Font-Awesome/cheatsheet/ You will see complete list of icons. In order to replace original icon you simply need to copy its class.
5. Go ahead and change the icon by specifying its class in menu CSS Class.
6. Refresh the home page and check how your site looks. We can see that menu icon is changed.
7. Color class defines color of font. Please note that such option may not be included to your template. Check color classes in all parent menus. You can use same class for several menu items or customize existing color.
8. In order to change existing color you need to find font color using Firebug developer plugin. More info on how to use Firebug you can find in Firebug. Mozilla Firefox plugintutorial.
9. In our case font color is specified in main-style.css file.
10. Open file in editor and find appropriate code. We have used Notepad++ editor.
11. Copy lines that need to be modified and place them to style.css file right after:
@import url("main-style.css");
Please note that you should perform all changes in style.css file of child theme (do not modify main-style.css directly as you may lost all you modifications to made to this file).
Modified style.css file you can check below.
12. Upload modified style.css file and refresh page (clear browser’s cache and cookies in case changes do not show up).
13. We have changed color. Please check the screenshot below.
14. More information about Font Awesome icons you can find at: http://fortawesome.github.io/Font-Awesome/
Feel free to check the detailed video tutorial below: