Icon boxes are very popular on WordPress powered website at the moments and they make a great addition to any homepage. Unfortunately if your theme doesn’t give you the tools to build one, you might be feeling like it’s time to upgrade your theme. However this can often be a time consuming and costly project, depending on the amount of work involved.

Example from Forrst

Example from Forrst

Thankfully you can add this design element to your site without changing your current theme. Icon boxes are great for homepages and listing a few of your key unique selling points or highlighting your sites main areas of content. By following this guide you can now add them to your site with relative ease.

1

Example from Clean Bold

Install your Plugins of Choice

There are many plugins out there that allow you to easily divide your posts and pages into grids or columns, just as there are plenty of options for quickly inserting icons into your content.

For this guide I’ve chosen the free Grid Columns plugin as it is a popular choice that allows you to quickly divide a section of a post or page into columns by using shortcodes. As this is a free plugin, it’s available from the WordPress.org repository and you can install it directly from your site by going to Plugins > Add New and searching for grid columns .

Grid Columns »

To make it very easy to add icons to your site, using a plugin is also recommended. My preferred plugin for this is the free WordPress Icons – SVG plugin which again can be installed directly from your site.

WordPress Icons – SVG »

However, if you’ve got your own personal preferences for adding grid layouts to your posts and working with icons then feel free to use those. If you want a premium option or are already using the powerful Visual Composer plugin, there is an extension available for it built especially for creating this type of page element called Icon Box for Visual Composer, which can be yours for just $10.

Creating the Columns

The first step in building an icon box page element is to create the grid layout or columns, used for dividing the icons and their descriptive text.

In this example we will be using the functionality of the Grid Columns plugin to create a three column layout for displaying three icons on your page in a horizontal line.

To create the columns, paste these shortcodes into your post (either Visual or Text view will work):

[column grid="3" span="1"]Column One[/column]

[column grid=”3″ span=”1″]Column Two[/column]

[column grid=”3″ span=”1″]Column Three[/column]

Icons Column Shortcodes

If you preview your page, you will now see the filler text divided across three columns. If you wanted to create a layout with a different number of columns, simply change the number after grid, and then increase or decrease the number of instances of the shortcode to match up. For example a two column layout would look this this:

[column grid=”2″ span=”1″]Column One[/column]

[column grid=”2″ span=”1″]Column Two[/column]

While a four column layout would look like this:

[column grid=”4″ span=”1″]Column One[/column]

[column grid=”4″ span=”1″]Column Two[/column]

[column grid=”4″ span=”1″]Column Three[/column]

[column grid=”4″ span=”1″]Column Four[/column]

And so on…

Once you’ve added the shortcodes for the grid layout, it’s time to insert the icons.

Inserting the Icons

The best way to get access to a massive amount of icons for free is to install a plugin. A good option is the WordPress Icons – SVG plugin which gives you access to over 500 vector web font icons. These icons will all resize or scaled without any loss in quality and the colours can be easily changed just as you would with a regular font.

Once you’ve installed this plugin, or any similar one, you can easily add icons to your posts and pages in WordPress.  To do so with the SVG plugin, simply go to the plugin page on your site, which can be found under the left sidebar admin menu entitled ‘SVG Icons Free’.

Icons Menu 01

From here you can browse the available icons and then click on the one you want to use. Once you click on an icon, the insertion code will be created for you. Copy the code and then make sure you switch to the Text tab in the post editor before pasting the code into your post or page to display the icon.

Icons Insert HTML

If you want to change the size of the icon, you can add the following to the code you copied:

<span data-icon=”” style=”font-size:200%;”></span>

To change the colour, add an inline color style to the icon div:

<span data-icon=”” style=”color:green;”></span>

To change both the size and colour, use:

<span data-icon=”” style=”font-size:200%; color:green;”></span>

The biggest problem with this approach is that when you switch from the Text to the Visual view, all this icon code will be removed. This is just the way WordPress works and unless you are prepared to install another plugin, then you will have to stay in Text view forever for this particular post or page.

Putting it Together

Once you’ve created your columns and then added your icons, your code should look something like this:

[column grid=”3″ span=”1″]<span data-icon=”” style=”color:green; font-size:1000%;”></span>[/column]

[column grid=”3″ span=”1″]<span data-icon=”” style=”color:red; font-size:1000%;”></span>[/column]

[column grid=”3″ span=”1″]<span data-icon=”” style=”color:blue; font-size:1000%;”></span>[/column]

Advanced Editing

While the above will get you started and give you a basic template for building your icon box page element, you will probably want to format it further to better meet your needs. My adding your own text and formatting to the above example you can create your own icon box for use on your homepage or elsewhere on your site, without the need to change to a theme that includes them as part of their design.

Icons Example

[column grid=”3″ span=”1″]<span data-icon=”” style=”color:green; font-size:1000%;”></span>
<span style=”color:green; font-size:120%;”>Join our Club</span>
<ul>
<li>It’s free</li>
<li>It’s cool</li>
<li>It’s now</li>
</ul>
<a href=”http://#”>Sign up</a> to get free timely emails from us.
[/column]

[column grid=”3″ span=”1″]<span data-icon=”” style=”color:red; font-size:1000%;”></span>
<span style=”color:red; font-size:120%; text-align=center;”>Get Writing Tips</span>
We provide great writing tips to your inbox every Monday to help you improve your writing skills and abilities. Tips cover prose, grammar and punctuation.
[/column]

[column grid=”3″ span=”1″]<span data-icon=”” style=”color:blue; font-size:1000%;”></span>
<span style=”color:blue; font-size:120%; text-align=center;”>Earn Money</span>
Use our guidance and tips to help you earn money and increase your freelance rates, all for free.
[/column]

Conclusion

Icon boxes have become very popular in the last year or so and are a great way to add attractive and responsive eye catching elements to your WordPress posts and pages. If your chosen theme doesn’t include the ability to create them, by following this guide and installing a couple of free plugins you can now add them to your site without changing themes.

If you want a more powerful and perhaps elegant way of building icon boxes, feel free to check out these premium plugins:

Visual Composer » + Icon Box for Visual Composer »


Author:

Joe has been using WordPress for many years and spends his time creating content for a wide range of websites and blogs. If you need compelling content for your blog, visit his freelance services portfolio now.

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Leave Yours +

2 Comments

  1. Hey Joe,

    Thanks for featuring my plugin (WP SVG Icons) in your tutorial. I’m so glad that you were able to find a great use for it! Nothing makes me happier than seeing my work used by (and helping) people , both on personal and client projects.

    I released an update last night that actually allows you to download ANY icons off of the icomoon font library, and import it directly into the plugin for use on your site. Now you are no longer limited to the icons that come pre-packaged with the plugin.

    Thanks again for mentioning the plugin in this post!

    Evan

  2. Hi Joe,

    Thanks for recommending our plugin – Icon Box for Visual Composer. Our focus while developing this plugin was a novice user who doesn’t understand code. That’s why we have used Visual Composer as a base and developed our plugin on it.

    See how easy it is to use – http://plugins.sharkslab.com/icon-box/screencast/

    Again, thank you very much recommending our plugin. We appreciate you taking time and reviewing it.

    Regards,
    Sujay

  • Comments are Closed

Our Sponsors

SEND ME FREE WORDPRESS STUFF!

Join our Newsletter to Receive 6 Free WordPress Themes

We will also send you our weekly Newsletter packed with the Latest WordPress Content.

We will look after your email & Never Spam!

You have Successfully Subscribed!