If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)


Featured templates

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>';}}

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

  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)

Live Chat
We help you to choose the right product.
Start chat