Featured templates

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

Sarah Vaynbaum January 30, 2015
Rating: 5.0. From 1 vote.
Please wait...

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)

Wordpress Templates Responsive
This entry was posted in WordPress Tutorials and tagged fontawesome, icon, shortcode, 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.