How to Add Feature Boxes With Icons in WordPress

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

Feature boxes highlight important selling points of your products and services. They’re a highly effective way to present features to new customers.

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

What Are Feature Boxes with Icons?

Most people don’t read websites word for word when they visit them, especially if they’re very text-heavy. Instead, your visitors will be scanning the page to find the information they’re looking for.

This means that as a business owner, you need to present important information in an easily scannable and highly engaging format.

That’s why many popular business websites usually 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 features boxes to showcase the important features of your product or service.

You can even include a call to action button beneath your feature boxes to direct users to your product or features page.

Here’s an example of how WPForms uses feature boxes with icons to highlight product features.

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.

• Add feature boxes with icons using WordPress block editor
• Add feature boxes with icons using WordPress page builder plugin

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

You can use the WordPress block editor to add feature boxes with icons to your WordPress site. 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 boxes.

Then, click the ‘Plus’ add block icon to bring up the block editor.

Next, search for ‘Columns’ in the search box.

Then, select the ‘Columns’ block.

This brings up a list of available column blocks.

We’ll select the’ 33/33/33′ column block since this gives us three equal-width columns to add feature boxes.

After that, you need to add icons to your columns.

The easiest way to do this is with icon fonts. Icon fonts are resizable symbols you can use without slowing down your website. We recommend using Font Awesome, since they offer one of the best icon font collections for free.

For more details, see our step by step guide on how to add icon fonts in your WordPress theme.

Once you’ve done that, you can easily add icon fonts to your columns by clicking on the ‘Plus’ add block icon in the first column.

Then, search for the ‘Shortcode’ block and select it.

After that, you can enter the following shortcode for the Font Awesome icon.

[icon name="bus"]

Simply replace the "bus" with the icon name you want. To see the complete list of available icons, you can go to the Font Awesome icon library.

When you find an icon you like, click it and take note of the icon name.

Then, you can add the name to your shortcode block and it will automatically display.

Note: If you already have your icons saved as images, then you can add an image block instead of using icon fonts.

To do this, simply select the ‘Image’ block instead of the shortcode block.

Then, you can upload your icon or select your icon from your media library.

Next, you can add text to your feature box by clicking the ‘Plus’ add block icon.

Then, select the ‘Paragraph’ block.

After that, you can click on the text to change it.

Then, simply follow the same steps as above to customize the remaining columns.

You can also create another three column row beneath the row you just created.

To do this, click on the column block and select the three dots ‘Option’ menu.

Then, select the ‘Duplicate’ option from the drop down list.

This will automatically create a copy of the column.

All you need to do is follow the same steps as above to change the icon and text.

Once you’re finished making changes to your feature boxes, you need to click the ‘Update’ or ‘Publish’ button at the top of the page.

Now your feature boxes with icons will be live on your website.

Here’s an example of what your visitors will see.

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 the SeedProd page builder plugin.

SeedProd is the best drag and drop WordPress page builder in the market used by over 1 million websites. It lets you easily create custom pages, landing pages, 404 pages, and more with the drag and drop builder.

It has over 100+ pre made templates you can use to speed up the design process. Plus, it includes an entire library of icons you can add to your WordPress website with a single click.

We’ll be using the plugin to add feature boxes with icons in WordPress, similar to the block editor above. But, with SeedProd, you have more customization options and control over the final design.

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 available, but we’ll be using the Pro version since it has page creation features we need.

Upon activation, you need to visit SeedProd » Settings and enter your license key.

You can find this information under your account on the SeedProd website.

After that, you need to go to SeedProd » Pages and then click on the ‘Add New Landing Page’ button.

On the next screen, you’ll be asked to choose a template. SeedProd has dozens of professionally designed templates to choose from.

Each template can be completely customized with the drag and drop builder, so choose a template design that matches your goals.

For this tutorial, we’ll use the ‘Blank’ template to show you how to add feature boxes with icons in WordPress easily.

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

This brings up a popup where you need to give your page a name. The page name will also be the URL for the page.

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

This brings you to a screen with the drag and drop builder interface.

Since we’re using the blank template, select one of the column layouts in the ‘Choose your layout:’ section.

After that, click on the ‘Icon’ block.

Then, drag it over to your first empty column.

Next, you can change the default icon.

Simply click on the icon, then click on the icon again in the settings column on the left.

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

Once you’ve found an icon you like, simply hover over it and click the ‘Plus’ button to add it to your page.

To customize the icon click on it again to bring up the menu options.

Then, you can change the alignment, size, color, and more.

After that, you can add a text beneath your icon.

Simply click on the ‘Text’ block and drag it underneath your icon.

To change the text, you can click on the block. Then, you can add your own text to the text block.

You can also change the size, color, font choice, and more with the left-hand menu.

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 over the section and click the ‘Duplicate Row’ button.

You can duplicate the section as many times as you’d like.

Then, follow the same steps above to add new icons and customize the text.

You can continue customizing your page by adding additional blocks and making changes in the settings menu.

Once you’re finished customizing your feature boxes with icons, click the ‘Save’ button, then select the ‘Publish’ drop down to make it live.

Here’s an example of what your visitors will see.

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 register a domain name and our expert comparison of the best free website hosting.

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.