How to Add WordPress Feature Boxes With Icons

Do you want to add WordPress content boxes on your site’s main page or other pages? Are you thinking to showcase your services in WordPress? Adding your core products and services in the feature boxes or blurbs with icons will give a direction to your clients. In this tutorial, we will share how to add WordPress feature boxes with icons.

By default, there are many WordPress themes that offers you to add feature boxes or blurbs to display your services. You can add a thumbnail or icon and a short description of your product.

To add WordPress feature boxes with icons on your site, you’ll need to follow these 8 steps:

• Step 1. Install and activate Advanced WP Columns plugin
• Step 2. Go to settings of Advanced WP Columns and add column class
• Step 3. Install and activate WP SVG Icons plugin
• Step 4. Edit your page and click on Advanced WP Columns button
• Step 5. Select the number of columns and add data in them
• Step 6. Click on the Add Icon button for box icons
• Step 7. Choose your icon and get the shortcode
• Step 8. Edit your theme’s CSS file to add code for icon size

By the end of this tutorial, you’ll be able to display your products or services in WordPress feature boxes with icons that’ll look like as shown in this image below:

Ready to get started? Let’s go!

Step 1: Install and Activate Advanced WP Columns Plugin

First thing that you need to do is to install and activate Advanced WP Columns plugin on your WordPress site. It is a free feature box plugin that creates blurbs or feature boxes easily.

You should check out this guide to learn how to install a WordPress plugin step by step.

Step 2: Go to Settings of Advanced WP Columns and Add Column Class

After activating the plugin, you should go to Settings » Advanced WP Columns from your WordPress admin backend.

In the Column Class field, you need to add mycolumns, and click on the Save Changes button.

Step 3: Install and Activate WP SVG Icons Plugin

Next you need to install and activate WP SVG Icons plugin.

This plugin will help you to create icons above your feature boxes. WP SVG Icons has tons of options, so you can easily pick an icon you need for your blurb.

Step 4: Edit Your Page and Click on Advanced WP Columns Button

Once both the plugins are installed and activated, simply edit your page where you want to display the blurbs or feature boxes with icons.

You need to click on the Advanced WP Columns option above the visual editor of your page.

It will open a popup that has options for you to create feature boxes on your page.

Step 5: Select the Number of Columns and Add Data in Them

Go ahead and click on the Empty dropdown to select the number of columns.

Now that you selected Four Columns, you need to add the content that we want to display in these feature boxes.

After adding the content, click on the Add Columns button. Your feature boxes are now added with text on your page.

Step 6: Click on the Add Icon Button for Box Icons

Next you should to add the icons above your feature boxes. Simply click before the first column and hit the Enter key to add space for the icon.

To add the icon, you need to click on the Add Icon button in the editor.

It will open a popup with tons of icons for you to choose for your feature boxes.

Step 7: Choose Your Icon and Get the Shortcode

You need to choose an icon and click on the Span tag to wrap it. Now click on the Insert Icon button. (It will also show you a shortcode for this icon in case you want to add it manually)

Go ahead and repeat the steps for all other feature boxes. Once the icons are added, you should click on Update button of your page.

Step 8: Edit Your Theme’s CSS File to Add Code for Icon Size

These icons will appear small on your page as shown in this image below:

You need to add a few lines of code in your theme’s CSS file to increase the size of the icons, so they look great on your site.

Add this code in your CSS file:

span.wp-svg-home-3.home-3 {
font-size:100px;
}

span.wp-svg-camera.camera {
font-size:100px;
}
span.wp-svg-film.film {
font-size:100px;
}
span.wp-svg-play.play {
font-size:100px;
}
.mycolumns {
border:1px solid #eee;
min-height:250px;
padding-top:20px !important;
}

The names of the icons in this code should match with the names of your icons. (Eg: “home-3” is the name of the first feature box icon that we added in this code here: span.wp-svg-home-3.home-3)

Your blurbs or feature boxes with icons will appear big as shown in this image below:

We hope this tutorial has helped you to learn how to add WordPress feature boxes with icons. You may also want to check out our guide on how to create a WordPress slider with thumbnails by using Soliloquy and learn about the OptinMonster’s powerful exit-intent technology.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress guides and resources.

Published by Waseem Abbas

Waseem Abbas is a content writer for SoliloquyWP and Envira Gallery.