WordPress. How to upgrade Font Awesome icons of version 3.2.1

This tutorial is going to show you how to update FontAwesome icons of version 3.2.1 in WordPress templates.

WordPress. How to upgrade Font awesome icons of version 3.2.1

You already know how to change FontAwesome icons. You can check FontAwesome icons version using Firebug. Please check the screenshot below:

In order to update FontAwesome icons version, please do the following:

1. Connect to your server using FTP or hosting Cpanel.

2. Navigate to wp-content/themes/theme##### folder (where ##### is your theme number). Open file called style.css in any code editor on your computer (Recommended software: Dreamweaver or Notepad).

3. Add code below at the top of the file:

   @import url(////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

4. Save file and upload it back to your server.

5. Edit custom-function.php file, located in wp-content/themes/theme#####/includes directory on your server (##### is a number).

6. On the lines 55-82 you will see:

   if($icon != 'no'){
     switch ($icon) {
     
   case 'icon1':
     $output .= '<figure class="icon"><i class="icon-coffee"></i></figure>';
     break;
     
   case 'icon2':
     $output .= '<figure class="icon"><i class="icon-laptop"></i></figure>';
     break;
     
   case 'icon3':
     $output .= '<figure class="icon"><i class="icon-instagram"></i></figure>';
     break;
     
   case 'icon4':
     $output .= '<figure class="icon"><i class="icon-lightbulb"></i></figure>';
     break;
     
     default:
     $icon_url = CHERRY_PLUGIN_URL . 'includes/images/' . strtolower($icon) . '.png' ;
     if( defined ('CHILD_DIR') ) {
     if(file_exists(CHILD_DIR.'/images/'.strtolower($icon).'.png')){
     $icon_url = CHILD_URL.'/images/'.strtolower($icon).'.png';
     }
     }
     $output .= '<figure class="icon"><img src="'.$icon_url.'" alt="" /></figure>';
     break;
     }

7. Replace icon class with the class for updated icon. Click here to see the list of updated icons.

   For example, change icon-coffee to fa fa-coffee

8. Save file, upload it your server and check your site to see the change:

   

Feel free to check the detailed video tutorial below:

WordPress. How to upgrade Font awesome icons of version 3.2.1