Categories

Featured templates

Drupal 7.x. How to change Font Awesome icons

Elina Webb October 20, 2014
Rating: 5.0/5. From 1 vote.
Please wait...

This video tutorial will show you how to change Font Awesome icons in Drupal 7.x.

Drupal 7.x. How to change Font Awesome icons

  1. Inspect the element with Firebug, you will see: <span class="fa fa-user"></span> :

    Drupal_How_to_change_Awesome_Font_Icons-1

  2. Using Total Commander or any software that has "find text" feature, locate the file with the required code:

    Drupal_How_to_change_Awesome_Font_Icons-2-2

  3. Open font-awesome.css loaded on your page (you can find the link to it in page source code):

    Drupal_How_to_change_Awesome_Font_Icons-3

  4. Check the font awesome version in that file:

    Drupal_How_to_change_Awesome_Font_Icons-4

  5. Go to Font Awesome website, locate the cheatsheet for the required font version:

    Drupal_How_to_change_Awesome_Font_Icons-5

  6. Located the needed icon CSS class:

    Drupal_How_to_change_Awesome_Font_Icons-6

  7. Change that CSS class in the file found on the step 2:

    Drupal_How_to_change_Awesome_Font_Icons-7

  8. Refresh the page to see the change:

    Drupal_How_to_change_Awesome_Font_Icons-8

Feel free to check the detailed video tutorial below:

Drupal 7.x. How to change Font Awesome icons

Themes For Drupal
This entry was posted in Drupal Tutorials and tagged Awesome, drupal, font, icon. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket