WordPress. How to change FontAwesome icons

This tutorial shows how to change Font Awesome icons in WordPress templates.

WordPress. How to change FontAwesome icons

1. We are going to change icons of post meta section. Those icons are represented by Font Awesome icons.

   

2. Inspect icon using Firebug developer software. You can find more information on how to use Firebug here. In our case icon has "icon-bookmark" class. Such icon is located inside <div class="post_category">.

   

3. Now we should override original icon code using CSS. Open themeXXXXX/style.css file in your editor (where XXXXXX is the theme number).

   

4. We should make CSS selector which will overwrite the original icon. Copy appropriate class name. You can find appropriate class name using Firebug. In our case it is post_category.

   

5. Paste class name into your CSS file and add . symbol in order to make CSS selector.

   

6. Copy icon code. You can find icon code using Firebug.

   

7. Paste code to .css file. Your CSS selector should have the same structure as on the screenshot.

   

8. Now we should specify icon code in style.css file. We can see reference to external CSS file in Firebug. This file is being used by Font awesome icons.

   Note: r=3.2.1 means that template uses Font awesome icons of version 3.2.1. Be sure to specify icons of appropriate version. Otherwise they will not show up.

   

9. You can use search engine in order to find icons of appropriate version of Font Awesome icons. Just perform search using the following keywords:
   font awesome 3.2.1 cheatsheet. Please note that 3.2.1 is version of Font awesome icons (your template may have another version of Font Awesome icons). Open the link with font Awesome 3.2.1 Cheatsheet.

   

10. We can see a list of icons and appropriate icon codes. Let’s change icon to icon-warning-sign. Copy part of icon code. Your icon should have code like f071.

    

11. Paste icon code into your CSS rule with the backslash at the beginning. Add !important directive in order to be sure that original styles will be overwritten. In our case modified file looks like on the screenshot below.

    

12. Save changes and upload modified file to your server. Refresh page in order to check how page looks.

    

13. We can see that original icon was overwritten in style.css file. Please perform the same actions for other icons.

Feel free to check the detailed video tutorial below:

WordPress. How to change FontAwesome icons