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.
micahel says
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
Ashutosh Panda says
It was an awesome article..
Helped me a lot
Rob says
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.
Hassan NAITALI says
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 !!
WPBeginner Support says
Hi Hassan,
You would still need some CSS.
Admin
Chris says
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?
Roshni says
Thank you. So useful!
Paul says
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.
john says
How do I get the icon to center over the content?
Evan herman says
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.
Andre Page says
That was very helpful Evan, thank you!!
Roshni says
Thanks, Evan. That worked.
Bobby says
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.
WPBeginner Support says
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
Bobby says
Ok, that’s good to know. Thanks again.
arun says
Great post, i am also running wordpress blog. i will apply these icons on my blog thanks for sharing.
Hemang Rindani says
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.