Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

How to add feature boxes with icons in WordPress (2 ways)

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.

WPForms feature box icon example

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 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.

Add new block to WordPress

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

Then, select the ‘Columns’ block.

Add 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.

Select three part columns block

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.

Select shortcode block

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.

Font Awesome icon font 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.

Add new icon font name to shortcode block

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.

Add new image block

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

Then, select the ‘Paragraph’ block.

Select paragraph block to add text

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

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

Customize 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.

Click options and duplicate column

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

This will automatically create a copy of the column.

Final duplicate column example

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.

Publish or update page to make live

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

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

Block editor feature boxes with icons

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.

Enter SeedProd 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.

Add new SeedProd landing page

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.

Select new SeedProd template

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.

Name SeedProd page

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.

Select three column layout

After that, click on the ‘Icon’ block.

Then, drag it over to your first empty column.

Add an icon block

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.

Click icon block twice

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.

Choose icon from icon library

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

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

Change icon settings

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

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

Add new text block

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.

Click to edit text block

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.

Duplicate icon and text row

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.

Save and publish page

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.

SeedProd feature boxes with icons example

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

17 CommentsLeave a Reply

  1. Really nice article and it help solve my problem. But here is my question.

    -How to you create the beautiful sidebars in see in this post such as how to start a blog, website blueprint, I need help with …, useful wordpress guides, Deals & Coupons

    -I really need help with creating this sidebars since am reading how to create a blog

  2. Hey. My icons won’t centre in the column itself. Is there a parameter we can add to ensure it centres? 2 of my icons centre fine, but 2 will only align left, even if I align it to center using formatting in the WordPress formatting editor (using a plugin).
    Thanks.

  3. Great article, i love it,

    so, i have one question, can i make changes to these icons and set them bigger by making change in the parent theme graphicaly and without touching css code ?
    Thank you !!

  4. I tried everything that was said in the tutorial but instead of it being set into columns, everything is set under one column. While the icon are set beside the words. I wanted to create three columns and everything in under one another in one column. Why is that that?

  5. Do you have a tutorial on how to do this with css, html and php without having to use a plugin? I’ve looked around but cannot seem to find anything.

  6. For anyone using WP SVG Icons that isn’t comfortable writing CSS, you can actually adjust the icon size by passing in a size=”#px” parameter to the wp-svg-icons short code.

    Example:
    [wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]

    That will set the icon to 100px and avoid the step of writing custom CSS. You may still need to adjust the padding.

  7. Good article about an important feature for your site. However, the plugin recommended has not been updated for 2 years. I am relatively new to WordPress and I was told to steer from plugins that have not been updated in the past year. I am guessing that it depends since you are very knowledgeable about WordPress and highlighted the plugin in this article. Let me know your thoughts.

    • Bobby, the plugin works fine we tested it. We have also reached out to plugin author so that they can update the plugin.

      Ideally you should install plugins that are recently updated. However, there are plenty of WordPress plugins that don’t need updates. Plugin authors feel that since a plugin is not broken and works great, then there is no need for them to update it.

      Admin

  8. Great post, i am also running wordpress blog. i will apply these icons on my blog thanks for sharing.

  9. Nice article. WordPress is a great enterprise content management solution that can cater to any complex business requirements and develop powerful websites. It contains thousands of flexible, customizable and responsive themes, modules and plugins that can be utilized to design multiple websites effortlessly. Increasing competition demands an interactive and engaging website and thus it is important to include variety of tools that encourage visitors to stay more on a page. Plugins in WordPress adds value to the web page specially by making it more interesting. Utilizing right tools like Call to action buttons and social media login and sharing buttons with on page content helps to enhance user experience. Article rightly highlighted the point that selecting a right tool and utilizing its powers allows a CMS developer to have better control over the website.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.