Create Icon Boxes

Icon Boxes give you a nice enhancement to any page, especially when you have a large variety of icons you can use from Font Awesome. Not only can you create an icon box, you can also customize it with colour, size, and content.

Icon Box Demo

The Landing Page tutorial also takes advantage of icon boxes, with an added bonus of adding a background colour. You can read the tutorial HERE which creates icon boxes that look like this:

fp icon boxes

Getting Started

Let’s start with the plugins we will need for this tutorial…although they are considered optional for this theme, they add enhancement for development of a website when using this theme.

  • Black Studio TinyMCE Widget – A text widget with a fully functional content editor
  • Better Font Awesome – Adds font awesome icons to your site from a plugin
  • Widget CSS Classes – Lets you create or add premade styles for your widgets
  • Simple Custom CSS – Gives you the ability to create custom CSS. However, if you use Jetpack, you can use the Custom CSS feature.

NOTE For the purpose of this tutorial and to do what I did for the demo, you can install and activate those two plugins if you do not have them already.

NOTE When you activate the Better Font Awesome plugin, go to the customizer >> Site Options, and uncheck the “Load Font Awesome” setting so we don’t have two font awesome scripts being loaded; we’ll use the plugin one.

 Create First Icon Box

  1. Go to Appearance >> Widgets
  2. Drag a “Visual Editor” widget into your chosen sidebar position
  3. At the top of the editor is an “Insert Icon” button to click on. Search for the icon you want and click on the icon. This will automatically insert a “shortcode” into your editor
    insert icon
  4. Select the icon shortcode and then using the font size from the editor, choose a size something like 32px. Once done, we need to make one small style adjustment, so we will switch to the “Text” tab and on the icon code, we need to add “line-height: 1;” to our code like this:
    <p><span style="font-size: 32px; line-height: 1;">[icon name="user" class="" unprefixed_class=""]</span></p>
  5. Below the heading, type in some content
  6. Below the icon shortcode, create a title heading and make it an H3 heading (or whatever you decide)
  7. Select all of your content, including the icon shortcode, and then from the editor, click on the “Align Center” option so that everything gets centered.
  8. The default style will just be the icon, but If you installed and activated the “Widget CSS Classes” plugin, at the bottom of your widget should be a field like you see below. You can enter in a custom style like “icon-circle” to get the style like you see in the icon box screenshot shown previously:
    icon circle class
  9. Click on “Save

When all done, your widget icon box source code should look something like the code below…which comes in handy if you decide to use a text widget instead and create your icon boxes manually without the editor:

<p style="text-align: center;"><span style="font-size: 32px; line-height: 1;">[icon name="user" class="" unprefixed_class=""]</span></p> <h3 style="text-align: center;">Ready For bbPress</h3> <p style="text-align: center;">Curabitur ut ultricies lorem. Nunc pulvinar mauris non gravida feugiat. Integer tincidunt semper hendrerit. Proin id vulputate ante. Nulla sed nisi lacinia, placerat ante nec, tristique elit. Integer vulputate tellus magna, et euismod.</p>

On the visual tab of your editor, your content area will look something like this:

visual editor icon box

Colour Your Icon

Very simple to do….when you insert your icon, select the complete shortcode, and then on the editor, click on the “Text Colour” option and choose your colour. When done, your shortcode should look something like this:

coloured icon

Bonus Tutorial 

Colour Your Icon Boxes Individually

Colouring each icon box individually is not really part of this theme, but it’s more of a bonus enhancement to using this theme. So I decided to add this tutorial to the icon boxes tutorial so that you can expand on the capability with a little extra HTML coding. Although you could create new CSS widget classes to do just that, or you can simply create a quick custom CSS style on a per-widget-basis. This is where the plugin called “Simple Custom CSS” comes in handy, or if you are using Jetpack, you can use the “Custom CSS” feature that is built into it. 

WARNING Before continuing with this tutorial, please note that you will need to look at source code, so this may not be for everyone.

Finding the Icon Box Sidebar ID

We need to find the sidebar’s ID or Class name by looking at the source code. Let’s take our sidebar area as an example. If you were to look at the source code, you would see something like this:

widget bg colour

NOTE I used the webmaster tools in my Chrome browser to view this, but you can use any browser’s own method to view the source code.

We will be adding a background colour to the widget, so looking at the source code above, we found the ID of the sidebar as “black-studio-tinymce-9“. But not everyone may be using the Black Studio widget, so your widget ID might look something like this:

widget text id

HINT When looking for the widget ID, you will notice it always includes a group of common classes similar to this:

widget text classes

Let’s Create Custom CSS for Colour

We will do this part based on the Black Studio widget and our source code ID we found above. To add a background colour to a widget, we will create some custom CSS like this by adding our colour (using HEX colour values) and we will also add a padding to our widget to give some space between the content the side of the widget inner area:

#black-studio-tinymce-9 { 
   background-color: #a55b2a;
   padding: 16px
}

If we did this to a basic widget like a text widget instead of the Black Studio one, then our code would look something like this:

#text-14 {    background-color: #a55b2a;
   padding: 16px; }

NOTE ID’s are unique, which means only one exists, whereas classes can have more than one. We use the ID so that our colour is applied only to that one unique widget with the unique ID.