WordPress. How to replace FontAwesome icons with images

This video tutorial will show you how to replace FontAwesome icons with images.

WordPress. How to replace FontAwesome icons with images

1. Log into your WordPress Admin Panel:

   

2. Go to ‘Media’, click ‘Add New’ to add your image:

   

3. Upload your image, then click ‘edit’ to get the direct link to this image:

   

4. Copy this direct link to the image:

   

5. Inspect the icon that you want to change with Firebug (you can check the tutorial on how to use firebug), you will see the code for it, for example:

   .icon-star:before {
   content: "";
   }

   

6. Edit that code using this rule:

   .icon-star:before {
   content: url("http://template-test.com/elina/wordpress/wp-content/uploads/2014/09/icons_star1.gif") !important;} 

   where "http://template-test.com/elina/wordpress/wp-content/uploads/2014/09/icons_star1.gif" is the link to your image and !important command to overwrite the old code. Then copy this code:

   

7. From Admin panel, go to Appearance -> Editor. Open ‘style.css’ file of the current theme. Then paste the code from step 6 to the bottom of this ‘style.css’ file. Click “Update File":

   

8. Refresh your website to see the new image that you have replaced:

   

Feel free to check the detailed video tutorial below:

WordPress. How to replace FontAwesome icons with images