Blog

WEBFI-WordPress-How to Add Feature Boxes With Icons in WordPress



Do you want to add a feature box with beautiful icons to your site? Feature boxes are great for showing selling points of your products and services. It can be a great method for presenting products to new customers.

Text version of this tutorial:
http://www.wpbeginner.com/wp-tutorials/how-to-add-feature-boxes-with-icons-in-wordpress/

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Check us out on Facebook:
https://www.facebook.com/wpbeginner

Follow us on Twitter:
http://twitter.com/wpbeginner

Join our circle on Google+:
https://plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com/

Summary of this tutorial:

Start by installing and activating the Advanced WP Columns plugin. Then go to Settings, Advanced WP Columns to configure the plugin.

For column class you would want to enter mcolumns and save your changes.

Next install and activate the WP SVG Icons plugin.Start editing the page where you want the icons to appear with the Advanced WP Columns button.

Select the number of columns you want on the page, then add some text to help you see where each column is and hit the add columns button.

You would want to then hit add icon, select the icon, and click the insert button. Copy the shortcode and repeat for as many icons as you like.

Plugins:

Advanced WP Columns
https://wordpress.org/plugins/advanced-wp-columns/

WP SVG Icons
https://wordpress.org/plugins/svg-vector-icon-plugin/

source

31 Comments

  • taeland on April 11, 2016

    Can i link them to go to different pages?

  • Sage Mauk on May 8, 2016

    THANK YOU! So dang helpful, I was pulling hair trying to do it in HTML.

  • Fernando Ali Dhimes on September 7, 2016

    have installed the plugin but i cant see the icon :/ any advice?

  • David Watson on September 24, 2016

    I'm confused how do you make the icons bigger using codes

  • Tobi Hughes on September 25, 2016

    can you do this with logos instead of icons? does anyone know?

  • Davi de Paulo on October 10, 2016

    Hi, nice tutorial. However, the icon button isn't there. Any help?

  • Voltage sethogenic on November 17, 2016

    please i cant enlarge my icons in the featured box, and my icons appears in a list form and not in a column

  • mofizul islam on December 10, 2016

    but it's not like optimonster.com

  • Lucas Paiva on December 15, 2016

    sorry, that was an incomplete tutorial…

  • Deb Hanson on February 2, 2017

    I've downloaded the columns plugin but nothing appears even though it says installed- something to do with a different version?

  • Nicholas Alston on March 26, 2017

    Is there a reason im not even able to find the plugin when i search from the dashboard? I dont even get the 'add new' sub menu…

  • Marcelo Santos on April 22, 2017

    Thank you!!! You saved my project!!!

  • M. Aamir on April 24, 2017

    i did't get what you do in the Editor section..anyone can help me??

  • League of Kingdoms Tips on May 13, 2017

    Savior!

  • Purvi Dubey on August 19, 2017

    thanks a lot ..very helpful .. subscribed.

  • timmy on October 15, 2017

    I mean , sure you gave us a tutorial, but it looks nothing like the example you start the video with.

  • Guy-Paul Mitchell-Dwelly on January 18, 2018

    Many thanks! Great video. You have a nice voice for delivering the content!

  • Guy-Paul Mitchell-Dwelly on January 19, 2018

    I have completed all this but I do not get the insert icon button but thanks anyway

  • Guy-Paul Mitchell-Dwelly on January 19, 2018

    Ah! It works but only on pages not sections

  • Guy-Paul Mitchell-Dwelly on January 19, 2018

    Oops! It does work! What a pillock!

  • Riya Juneja on April 4, 2018

    successfully wasted 4 mins… this is useful when i want to make whole page of feature… but .. wot abt whn i just need a single section for services on my page???

  • Jaime Lebron on July 20, 2018

    How can i add my own icons?

  • Affiliate Training Now on July 29, 2018

    how did you make the columns bigger?

  • SVGSPRITE on December 13, 2018

    💖 An interesting plugin to generate icons in custom design for the Feature boxes https://wordpress.org/plugins/icons-factory

  • Little Britian on March 22, 2019

    Hello, love it. Question how do i add a "feature box" example: ICON — ICON — ICON ( —- is lines between icons) with text below icons/image with a subscribe button? im using word press/astra theme, elmentor page builder. Thx

  • Lorena Andrea on June 2, 2019

    but how can i change its color? or make a two-three colors to my icons like the example you show on 0:20:00 like the green monster eating a letter?

  • paras rolling mills on May 24, 2020

    thank you

  • BillCollektr on October 14, 2020

    Are the custom feature icons used on the OptinMonster site scalable SVG files? I want to create detailed icons similar to those that are scalable. Any tips would be great! Thanks

  • shruti waidande on December 3, 2020

    Amazing 😍😍😍 m so happy and excited to watch more n more .. thankyou soo muchhh for teaching

  • Bill Jensen on December 5, 2020

    advanced wp columns no longer supported. Is there an alternative?

  • Connor Campbell on October 20, 2021

    Hi is there an up to date version of this?

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

error: WEBFINET SECURITY IS ON