Feature box displays important selling features of products and services and is a technique that is highly engaging by presenting features by means of Icons on WordPress Website.

How to add feature boxes with icons on WordPress website

First install and activate the Plugin Advanced WP Columns.

1 How to add feature boxes with icons on WordPress website

After activation

2 How to add feature boxes with icons on WordPress website

Come on the following

Settings >>> Advanced WP Columns to configure the plugin settings.

3 How to add feature boxes with icons on WordPress website

Just scroll down to the option ‘Column class’ and enter text mycolumns next to it. Make sure you do not forget to click on the save changes to store your settings.

4 How to add feature boxes with icons on WordPress website

After this install and activate the plugin WP SVG icons that can insert beautiful SVG icons into the feature boxes.

5 How to add feature boxes with icons on WordPress website

After activation, the WordPress is enabled for creating feature boxes.

Edit the page where you wish to add the feature boxes


Two new buttons on the post editor screen can be seen.

The first button is the Add Icon located above the editor.
The second button is the Advanced WP columns located in the visual editor as the last item.

6 How to add feature boxes with icons on WordPress website1

In case the visual editor shows only a single row of buttons then you need to click the toggle toolbar to expand it.

Now you need to click button “Advanced WP columns”. When this is done a popup will emerge,
you need to click on empty and choose the number of columns you wish to add.

7 How to add feature boxes with icons on WordPress website

Once it is done then click on each column and add the text. If you do not put some text then it will not be easy to see the columns in the post editor. After this is done click on the button “Add Columns” at the bottom.
8 How to add feature boxes with icons on WordPress website

Now in the post editor you will be able to see the columns. In the subsequent step add icons above the text.  Now move the mouse and place the pointer to the first column at the beginning of the text area and click the enter button, this will move the text down and will give you space for inserting the icons.

9 How to add feature boxes with icons on WordPress website

Then click on the Add icon button, this will bring a popup like the following.
10 How to add feature boxes with icons on WordPress website

Now you can select the icon that you wish to use by clicking it.  Then click on the span button as it will cover your icon inside <span> element.

Then click on the insert button. The shortcode for the SVG icon will appear in your post editor.
The shortcode will appear as the icon selected, if you select blog then it will look like this:

[wp-svg-icons icon=”blog” wrap=”i”]

11 How to add feature boxes with icons on WordPress website

Simply repeat the same procedure if you wish to add icons in other boxes.

When you have completed the task all you need to do is to click the update button to save you page.
Just preview your page, you will notice that the icons on the page are too small and feature boxes are hardly noticeable.

12 How to add feature boxes with icons on WordPress website1

Do not be apprehensive all you need to do is to add a little CSS to solve this issue.
Add the following CSS snippet in your theme or the child theme’s stylesheet.

01      span.wp-svg-blog.blog {
02	font-size:100px;
03	}
04	 
05	span.wp-svg-connection.connection {
06	font-size:100px;
07	}
08	.mycolumns {
09	border:1px solid #eee;
10	min-height:250px;
11	padding-top:20px !important;
12	}

Just remember to adjust the CSS so that it matches the names of the icons which you are using.

14 How To Easily Add Feature Boxes Along With Icons In WordPress F1