Drupal 7.x. How to replace FontAwesome icons with images

This tutorial shows how to replace FontAwesome icons with image in Drupal 7.

Drupal 7.x. How to change iconic font icon with an image

FontAwesome icons can be replaced with image in CSS files:

1. Click F12 or rightclick the icon you’re about to change and select the Inspect Element option to open Firebug Inspect element tool in your browser.

2. Rollover the icon you would like to replace with the image in order to find file and line which stores the icon code:

   

3. Upload the image into the sites/all/themes/themeXXX/images directory on server, where themeXXX is the theme name:

   

4. Open the required file with Dreamweaver or Notepad on server, locate the line with the following code:

   a.tm-follow-link-facebook:before {
   	content: "\f0d5";
   }
   

   Replace it with:

   a.tm-follow-link-facebook:before {
       background: url("http://yourwebsite.com/sites/all/themes/themeXXX/images/facebook.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
       content: "";
       height: 43px;
       position: absolute;
       width: 43px;
   }
   

   Make sure to replace http://yourwebsite.com/sites/all/themes/themeXXX/images/facebook.png with correct path to your image and change the image name accordingly. Also, you will need to adjust “height” and “width” values according to your image dimensions.

5. Refer to the How to create CSS rules for specific page in WordPress, Joomla and Drupal tutorial to learn how to find files and lines with the Inspect Element tool.

6. You may need to add element top/left or bottom/right properties in the CSS to adjust the image position.

7. Save the changes in the updated file and upload it on the server. Overwrite the existing file with the updated one:

   

8. Refresh page with Control/Command+F5 keys:

   

Feel free to check the detailed video tutorial below:

Drupal 7.x. How to change iconic font icon with an image