Shortcodes – Make Icon Boxes

Making icon boxes can be done in a few ways, either from the shortcode generator using the button on the content editor, or pasting in shortcode directly. We can also add icon boxes to our post or page content, but also to Text Widgets. How you add and to where you add your icon box will depend on which method, so I will take you through this tutorial.

Adding Icon Boxes to Content

This method requires the use of columns, which is another shortcode option available to you. The reason for using columns is so that we can have our icon box(s) in columns, otherwise you will get one icon box per line in your page.

Step 1 – Create Columns

We first need to insert columns into our page content using the “Column” shortcode. Once we add our columns, we can then add icon boxes inside each column.

On your editor, click on the shortcode icon for “Columns” and for this tutorial, we will choose “3 Columns

button columns

When we add our columns, our shortcode will be inserted into our editor like this:

column shortcode

Step 2 – Add Icon Boxes

Now we will add our icon boxes to each instance of each column by selecting the “Your Content Here” text. On the shortcode icon row, click on the “Icon Box” button:

button iconbox

You should now get a window popup that looks like this:

iicon box1

Now we can fill out the attributes of our icon box with the following items:

  • Style – Default is just the icon style, but Circle is the icon in a background circle
  • Colours – Choose the colour of your icon

Once done, click on the “Insert” button and repeat for the next column (our second icon box), then once again for the third column and icon box. When you insert each icon box shortcode, you will see it added like I show it highlighted here:

iconbox2

Step 3 – Adding an Icon

Depending on what you add to your icon boxes, we will use the live demo site for Incept as an example. The icon box will include an icon (of course), a heading, and then some content. We will need to add this to the icon box shortcode where it contains a placeholder “Your Content Here” as you see in the above screenshot that is highlighted.

Before we begin adding content, I would recommend using an icon plugin to insert icons. This will make it much easier, but the plugin I would recommend is called “Better Font Awesome” because it adds an icon button above your content editor:

better fa editor

First thing we need to do is to make sure this plugin is installed and active, so go to Plugins >> Add New, and then search for “Better Font Awesome” and install it.

betterfontawesome

Now let’s select and highlight the “Your Content Here” placeholder in our first icon box shortcode:

iconbox3

Now click on the “Inset Icon” button at the top of your editor and look for the icon you want. For example, let’s use the “Apple” icon by typing in Apple in the search field, then once it shows up, click on the icon.

better fa editor2

iconbox4

Now we can see it added an icon to our first column and our first icon box using its own shortcode as you see me highlight it:

iconbox5

Step 4 – Adding More Content

We now have our first icon box with an icon added, but we still need to add more content to make it worthwhile. So looking at the above screenshot, you see I have highlighted the icon shortcode (the icon) which has this code:

[icon name=”apple” class=”” unprefixed_class=””]

We need to place our mouse cursor right after that and then create a new line by pressing the “Enter” key on our keyboard so that we can type in a heading for our first icon box. Type your heading and then press the enter key again. Highlight your title and from the editor, select the Heading 3 (h3) option…or whatever heading size you want. 

iconbox6

Now we can add more content, such as a paragraph of text. We need to place our mouse cursor right after our heading “My First Icon Box” and press the enter key on our keyboard to create a new line. For sake of example, let’s use some Lorem Ipsum text. Once done we will now see our first icon box like this:

iconbox7

This completes our first icon box, so if we check it out on the front of our site, it will look something like this:

iconbox8

Now the fun begins because we need to repeat everything from Step 3, but we will be doing it to the second column.

Valuable Tip  As we add more code to a series of nested shortcodes, it can get a little disorienting looking at all the strange shortcodes and multiple lines, so here is a quick tip to make it easier.

When you first insert your columns, in our tutorial we added a 3-column layout, remove the last two column instances. 

column shortcode

After removing the last two, we end up with this:

iconbox9

When you create your first icon box like we did from Step 3, you can now copy the whole thing and paste it 2 more times. This “might” make it easier to just modify the existing content and icon without too much effort. Simply highlight this part and paste it after each one until you get 3 copies.

iconbox10

If you want a reference to all the Font Awesome Icons, you can check out their website where it shows all available icons:

Font Awesome Icons

Why Not Have Fields for Everything in the Popup?

A question I am sure most will ask, but the reason why I did not include form fields in the icon box popup window for the Icon, Heading, Content, etc., is because people will create different kinds of icon boxes with content. Some may not want headings, some may not want the content part, or they may want to change the order of content, or perhaps add more content.

Too many variables involved. So I kept it very basic by inserting only the “container” for an icon box content.