How To's

How to add feature boxes with icons in WordPress?

Feature box displays important selling features of products and services. Are you thinking to showcase your services in WordPress? Adding core products and services in the feature boxes with icons will give a direction to your clients. In this article, we will share how to add WordPress feature boxes with icons.

What is feature boxes with icons?

feature boxes with icons example wordpress

When we visit any website, we don’t tend to read everything on the website. As a business owner, you have to make sure that you create a highly engaging format. You might have observed that most of the websites have a large image or a slider on the top. Below that you can showcase the important features of your products or services.

Adding feature boxes with icons on your WordPress homepage

The first step is to install and activate the Advanced WP Columns plugin. Go to settings and click on Advanced WP Columns to configure the plugin.

Scroll down to the option called “Column class” and enter “my columns” next to it.

column class feature boxes with icons wordpress

Click on “Save Changes” button to store your settings. You will need beautiful SVG icons to insert in feature boxes. Install and activate WP SVG Icons plugin.

wp svg icons feature boxes wordpress

This plugin will help you to create icons above your feature boxes. The plugin consists of many options so you can pick icons as per your requirement. After activation of both plugins, you are all set to create your feature boxes.

You will see two new buttons on your post editor screen. One button is “Add icon button” and the second button will be located as the last item in the visual editor menu.

advanced WP columns button feature boxes wordpress

Note:

If visual editor shows only one row of buttons, then click on the toggle toolbar button to expand it.

Click on the advanced WP columns button. You will see a pop-up – click on “Empty” and select the number of columns you want to add.

creating columns for feature boxes with icons wordpress

Next step is to click on each column to add some text. Once you are done with adding text, click on the add columns button at the bottom.

You will be able to see the columns in your post editor. Now you have to add icons above the text. Click before the first column and hit the “Enter” key to add space for the icon.

icon space feature boxes wordpress

To add the icon, click on “Add icon” button in the post editor.

add icon button feature boxes wordpress

It will open a pop up with tons of icons.

adding icons feature boxes wordpress

Select the icons as per your requirements. You can use the icons by clicking on it.  Click on the span button, your icons will be wrapped inside “span” tag. Next step is to click on the insert button.

insert icon feature boxes wordpress

You can use a shortcode to add icons manually. Repeat this process to add icons in other feature boxes. Once the icons are added, click on “Update” button of your page.

Visit your website to check icons and you will see that the icons are too small and feature boxes are not noticeable.

feature boxes small icons wordpress

You will need to add a few lines of code in your theme’s CSS file to increase the size of the icons.

add css code feature boxes with icons wordpress

Now your feature boxes with icons will appear big as shown in below image:

final feature boxes with icons wordpress

We hope this article has helped you to learn how to add WordPress feature boxes with icons.

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

Close