How to Add Feature Boxes With Icons in WordPress

Do you want to add feature boxes with beautiful icons to your WordPress site?

You can use feature boxes to highlight a product or service’s biggest selling points. They’re also a great way to present features to new customers, so they can decide whether this product or service is right for them.

In this article, we’ll show you how to add feature boxes with icons to your WordPress site.

What Are Feature Boxes with Icons?

Most visitors won’t read every single word on your WordPress website, especially if a page is very text-heavy.

Instead, your visitors will scan the page to find the information they’re looking for, fast. This means you need to present important information in a way that’s scannable and engaging.

That’s why many business websites have a large image or a slider at the top of a web page with a call to action button.

Just below that, you can use feature boxes to showcase the product or service’s most important features. In the following image, you can see how WPForms uses feature boxes to highlight the plugin’s biggest selling points.

You can even add a call to action so users can learn more about a particular product.

With that said, let’s show you how to add feature boxes with icons in WordPress using two different methods. Simply use the quick links below to jump straight to the method you want to use.

Method 1. Add Feature Boxes with Icons Using the WordPress Block Editor

You can add feature boxes with icons to your WordPress site using the column block. If you’re just getting started with the block editor, then see our guide on how to use the WordPress block editor.

First, you need to open up the page where you want to add the feature box. Then, click the ‘+’ add block icon to bring up the block editor.

Next, type ‘Columns’ into the search box.

When the right block appears, click to add it to the page.

WordPress will now show all the different column blocks. The numbers are how much space each column takes up in the block. For example, ’50/50′ is two columns that each take up 50% of the available width.

In this guide we’ll select the’ 33/33/33′ column block since this gives us three columns with equal width, but you can use any layout you like.

After that, you can go ahead and add icons to the columns.

The easiest way to do this is with icon fonts, which are resizable symbols that won’t slow down your website. We recommend using Font Awesome, since they have one of the biggest collections of free icons. For more details, see our guide on how to add icon fonts in your WordPress theme.

Once you’ve done that, you can easily add icon fonts to a column by clicking on that column’s ‘+’ icon.

In the popup that appears, search for the shortcode block and click to add it to your layout.

After that, you can enter the following shortcode, but make sure to replace “bus” with the name of the icon that you want to use:

[icon name="bus"]

To see a complete list of available icons, simply go to the Font Awesome icon library.

When you find an icon that you like, click it to see that icon’s name.

For example, in the following image we’re looking at an icon called ‘address-book.’

You can now add this name to the shortcode.

To learn more about working with shortcodes, please see our beginner’s guide on how to add a shortcode in WordPress.

If you’ve already saved your icons as images, then you can add an image block instead of using shortcode.

To do this, simply click on ‘+’ in the first column and then add an ‘Image’ block instead of a shortcode block.

You can now choose an image from the media library or upload a new file from your computer.

Once you’ve added all your icons, the next step is adding text to the feature box.

To do this, go ahead and click on the ‘+’ button inside the Columns block. Then, add a ‘Paragraph’ block.

After that, simply type your text into the paragraph block.

You can add icons and text to the columns by repeating the same process described above.

Sometimes you may want your feature box to have multiple rows.

Simply click the Columns block and then select the three dots in the toolbar. You can then click on ‘Duplicate.’

This will create a copy of the Columns block.

You can now add icons and text by following the same steps above.

You can also add other content to the page, such as an image of the product that you’re selling, or categories and tags.

When you’re happy with how the page looks, just click on the ‘Update’ or ‘Publish’ button at the top of the screen.

Your feature boxes with icons will now be live.

Here’s an example of what people will see when they visit your WordPress blog.

Method 2. Add Feature Boxes with Icons Using a WordPress Page Builder Plugin

One of the easiest and most beginner friendly ways to add feature boxes with icons to WordPress is by using SeedProd.

SeedProd is the best drag and drop WordPress page builder in the market and allows you to create custom pages in WordPress using a drag and drop builder.

SeedProd has over 180 professionally-designed templates you can use to create beautiful pages, fast. Similar to the WordPress block editor, SeedProd makes it easy to add feature boxes to your pages.

It also has an entire library of icons that you can add to your feature boxes with a single click, and has more customization options than the block editor.

Here’s an example of a feature box, created using SeedProd’s ready-made blocks and icons.

First thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd, but we’ll be using the Pro version since it has more features. If you use email marketing to promote your products, then SeedProd also integrates with many of the best email marketing services.

Upon activation, go to SeedProd » Settings and enter your license key.

You can find this information by logging into your SeedProd account.

After that, go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’

On the next screen, you can choose a template. You can customize any of these templates using SeedProd’s drag and drop builder, but it’s still a good idea to choose a template design that matches your goals.

All of SeedProd’s templates are organized into different campaign types such as coming soon and lead squeeze campaigns. You can even use SeedProd’s templates to improve your 404 page.

For this guide, we’ll use the ‘Blank Template,’ but you can use any template you want.

To choose a template, simply hover over it and then click the ‘Checkmark’ icon.

This brings up a popup where you can give the page a name. The page name will also be the URL for the page, but you can change this link if you want. For example, you might want to improve your WordPress SEO by including some relevant keywords.

After that, click the ‘Save and Start Editing the Page’ button.

This opens the template in SeedProd’s user-friendly page editor.

Since we’re using the blank template, you need to start by choosing a layout. To do this, simply click on any of the column layouts.

After that, find the ‘Icon’ block in the left-hand menu.

You can now drag and drop this block onto the first empty column.

This adds the Icon block to your layout, with a default icon already selected.

To change the icon, click on it and then select the ‘Choose Image’ button.

This brings up the icon library with hundreds of icons to choose from. You can use the search bar to look for a specific icon or browse through the entire list.

When you find an image that you want to use, simply hover over it and then click the ‘Plus’ button to add it to your page.

To customize the icon, simply click to select it.

You can now tweak this icon using the settings in the left-hand menu, including changing its alignment, size, color, and more.

Once you’ve done that, go ahead and add a ‘Text’ block beneath the icon.

Simply find the ‘Text’ block in the left-hand menu, and then place it beneath your icon using drag and drop.

To add some text, click to select the block. You can then type into the small text editor in the left-hand menu.

Here, you can add links, change the text alignment, change the text color, and more.

To customize the other columns simply follow the same steps as above.

If you want to add another row of feature boxes with icons, then hover your mouse over the section and then click the ‘Duplicate Row’ button.

You can duplicate the section as many times as you want to quickly create more feature boxes with icons.

You can then add new icons and text by following the same process described above.

You can continue working on the page by adding more blocks and customizing those blocks in the left-hand menu.

When you’re happy with how the page looks, click the ‘Save’ button. You can then select ‘Publish’ to make that page live.

We hope this article helped you learn how to add feature boxes with icons in WordPress. You may also want to see our guide on how to create an email newsletter and our expert pick of the best live chat software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.