If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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.

    WordPress. How to change Font Awesome icons-1

  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">.

    WordPress. How to change Font Awesome icons-2

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

    WordPress. How to change Font Awesome icons-3

  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.

    WordPress. How to change Font Awesome icons-4

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

    WordPress. How to change Font Awesome icons-5

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

    WordPress. How to change Font Awesome icons-6

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

    WordPress. How to change Font Awesome icons-7

  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.

    WordPress. How to change Font Awesome icons-8

  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.

    WordPress. How to change Font Awesome icons-9

  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.

    WordPress. How to change Font Awesome icons-10

  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.

    WordPress. How to change Font Awesome icons-11

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

    WordPress. How to change Font Awesome icons-12

  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