WordPress. How to change FontAwesome icons (inserted via shortcodes)

Today you will learn more about the font-awesome icons in WordPress Cherry 3.x. templates.

In order to change the icons in your template, you will need to follow the steps mentioned further:

1. Enter admin panel of your website.
2. Click on Appearance tab – then Editor.
3. After that you will be able to see a bunch of different files, out of which you need to find the custom-function.php (In order to make search easier, you can use the CTRL + F function).

4. When you have opened the file, search for the code that will look as follows:

   if ($icon == 'icon1') {
   $output .= '<div class="extrabox"><figure class="icon"><i class="icon-cogs"></i><span>1</span></figure></div>';
   } elseif ($icon == 'icon2') {
   $output .= '<div class="extrabox"><figure class="icon"><i class="icon-book"></i><span>2</span></figure></div>';
   } elseif ($icon == 'icon3') {
   $output .= '<div class="extrabox"><figure class="icon"><i class="icon-briefcase"></i><span>3</span></figure></div>';
   } elseif  ($icon == 'icon4') {
   $output .= '<div class="extrabox"><figure class="icon"><i class="icon-check"></i><span>4</span></figure></div>';}}
   

   

5. In order to change the icon, you need to find and replace the icon class: <i class=”icon-cogs”></i> to the new one.

6. As an example, let us take <i class=”icon-compass”></i>.

7. The list of the icons can be taken from here: Font-Awesome Icons

In case you have any issues, feel free to check the video version of our tutorial:

WordPress. How to change FontAwesome icons (inserted via shortcodes)