Create an Icon Box

Creating an icon box in Emphasize is based on using HTML snippets, but we will also use third party plugins. The bad news is that adding icons into content and widgets is not really that easy when it comes to WordPress, so we still have some work to do.

When you first downloaded the Emphasize Pro package, there is a folder inside named “snippets” which contains several text files, each with specific code snippets that you can copy and paste. The other option is to use a plugins (more on this in a moment).

Icon Boxes

For icon boxes, I would recommend using text widgets in the various sidebar positions this theme offers. You get a far better control over each one individually, and it makes it far easier to modify the content. This part of the tutorial will focus on adding them to text widgets.

What You Need First

This theme already includes the Font Awesome icon font, but we need to make things a little easier (sort of) by installing a plugin called “Better Font Awesome” because this will add an icon generator to our editor.

font awesome plugin

So if you are inserting icons into your page content, you can use that icon generator. However, text widgets do not have an icon generators, so to give you more flexibility with the plain basic text widget you get in WordPress, I recommend using the Black Studio TinyMCE Text Widget.

black studio tinymce

 

IMPORTANT Because the Better Font Awesome plugin loads Font Awesome for us, we can disable the theme’s own copy of this font by going to the customizer:

  1. Go to Appearance >> Customize >> Site Options
  2. Look for the “Load Font Awesome” setting and then uncheck the box next to it.
  3. Click “Save & Publish

The Problem with the WordPress Editor and Icons

One of the most annoying things about WordPress and it’s editor (including third party editors) is that when you add an icon into your page content with HTML code, is that it strips it out when you switch back to the Visual tab in the editor, or when you click Save (publish). For example, if I were to add this to the Text tab view of the editor:

<span class="fa fa-cogs"></span>

…then I switch back to the visual tab, that code gets stripped out by the editor. If you add that code to a text widget, it stays because with text widgets, the window you add it to is always an HTML text window. However, to add icons to page content from the editor, we have to use shortcodes. This is why I suggest using the Better Font Awesome plugin because it adds a nice icon generator button to your editor so that you can click on it and insert a premade shortcode. Shortcodes will not get stripped out.

When using the Black Studio TinyMCE text editor widget, you get that generator there as well.

Make an Icon Box with Title

This is what we will be making by adding it to a WordPress Text Widget:

icon box 1

This is the code snippet you will copy and paste into your text widget:

<div class="icon-box-title">    <div class="icon-header">    <span class="small-icon">[fa icon="fa-cogs"]</span>    <h3>Icon Box Title</h3> </div> <p>Aenean ornare libero mattis lacinia facilisis. Cras elit ex, gravida non auctor et, vehicula non mauris. Quisque condimentum nibh id scelerisque dignissim. Nam commodo</p> </div>

With the code above, you can change the sample content with your own, as well, change the icon. To change the icon, we have to do this manually, so use the Font Awesome website as a reference:

Icon Archive

The example code snippet above shows the icon being “fa-cogs“, so when you find the icon you want, simply change “fa-cogs” to the new one, such as fa-download

When it comes to changing the size, you can change the class in the code sample above sample default of small-icon to be medium-icon or large-icon in the code snippet. 

Using the Icon Generator

When using the icon generator from the Better Font Awesome plugin, you have more flexibility, although this is strictly only for the icon and not the full icon box. When you are in the editor, you will see a button added like this:

add icon button

Clicking on the Inert Icon button brings this window up:

icon popup window

All you do is click on the icon you want. For example, this is what it will look like:

inserted icon

The unprefixed_class can be ignored or removed so that it looks like this:

inserted icon2

The empty class=”” is reserved if you want to add a custom class that you created to this icon.

Apply this Icon Generator to an Icon Box

Let’s use the Black Studio’s text widget (Visual Editor widget) to a sidebar position and use the icon editor. First, we will add our icon code:

code added to widget

You will notice I am in the Text (HTML) tab, and the blue highlighted code is going to be replaced with a different icon, so you can either delete it or keep it highlighted and then click the “Insert Icon” button. Once you choose your icon, the old shortcode will be replaced with the new one.

code added to widget

Icon Box Styles – Title

These are the snippets you can use as a starting point, beginning with the default one of Icon Box Title:

<div class="icon-box-title"> <div class="icon-header"> <span class="small-icon">[fa icon="fa-cogs"]</span> <h3>Icon Box Title</h3> </div> <p>Aenean ornare libero mattis lacinia facilisis. Cras elit ex, gravida non auctor et, vehicula non mauris. Quisque condimentum nibh id scelerisque dignissim. Nam commodo</p> </div>

Icon Box Styles – With Icon Background

<div class="icon-box-title"> <div class="icon-header"> <span class="small-icon-bg">[fa icon="fa-cogs"]</span> <h3>Icon Box Title</h3> </div> <p>Aenean ornare libero mattis lacinia facilisis. Cras elit ex, gravida non auctor et, vehicula non mauris. Quisque condimentum nibh id scelerisque dignissim. Nam commodo</p> </div>

Icon Box Styles – With Colour

<div class="icon-box-title"> <div class="icon-header"> <span class="small-icon-bg orange">[fa icon="fa-cogs"]</span> <h3>Icon Box Title</h3> </div> <p>Aenean ornare libero mattis lacinia facilisis. Cras elit ex, gravida non auctor et, vehicula non mauris. Quisque condimentum nibh id scelerisque dignissim. Nam commodo</p> </div>

Icon Box Styles – Left

<div class="icon-box-left"> <span class="large-icon">[fa icon="fa-cogs"]</span> <div><h4>This is a Sample Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar aliquet molestie. Ut quis auctor tellus. Vivamus sed lectus laoreet, elementum urna commodo</p> </div> </div>

Icon Box Styles – Left with Background

<div class="icon-box-left"> <span class="large-icon-bg">[fa icon="fa-cogs"]</span> <div><h4>This is a Sample Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar aliquet molestie. Ut quis auctor tellus. Vivamus sed lectus laoreet, elementum urna commodo</p> </div> </div>

.