Categories

Featured templates

WordPress. How to upgrade Font Awesome icons of version 3.2.1

Ammy Brown August 10, 2015
Rating: 5.0. From 1 vote.
Please wait...

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:

WordPress._How_to_upgrade_Font_awesome_icons_of_version_3.2.1_1

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:

    WordPress._How_to_upgrade_Font_awesome_icons_of_version_3.2.1_2

Feel free to check the detailed video tutorial below:

WordPress. How to upgrade Font awesome icons of version 3.2.1

Best Paid Wordpress Themes
This entry was posted in WordPress Tutorials and tagged fontawesome, icon, upgrade, WordPress. 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

Live Chat
We help you to choose the right product.