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).

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.

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.

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:

Go to Appearance >> Customize >> Site Options

Look for the “Load Font Awesome” setting and then uncheck the box next to it.

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:

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

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:

Clicking on the Inert Icon button brings this window up:

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

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

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:

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.

Icon Box Styles – Title

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