StyledThemes

Using Icons

This theme offers a large selection of font based icons from a source called “Font Awesome” which has proven to be very popular…so much, that there is even a plugin for it. We will use this plugin with this theme because I also added the font and custom styling for it.

Get the Plugin

  1. Go to Plugins >> Add New
  2. Type in the search: Font Awesome Shortcodes
  3. Activate it

Using Icons in your Content

When you install the Font Awesome Shortcodes plugin, you get a green button added to your editor that looks like this:

ps-icon-button

Basically you click in your page or post content where you want to insert the icon of your choice and then click the Font Awesome button which gives you a popup window to choose your icon. Once you select your icon, it gets inserted as a shortcode. You won’t see the actual icon in your editor, but you can see it in your post or page when viewed from the front-end, or preview. This is an example shortcode based icon in your page editor:

[fa type="desktop"]

Adding Icons into Templates

Easy to do because wherever you need your icon in a theme file or template, you would simply add this HTML code:

<i class="fa fa-desktop"></i>

Of course, you would change the icon to the one you need by using the reference at the Font Awesome website:

Font Awesome

Using the Custom Circle Icons

With Pure & Simple, I added one custom style for icons that look like a circle with an icon in the middle. This is done by wrapping your icon shortcode or the HTML version with a container like this example:

<span class="icon-circle">[fa type="desktop"]</span>

Or…

<span class="icon-circle"><i class="fa fa-desktop"></i></span>

Adding Colour

With the Circle Icon style, you can also change the colours like so:

<span class="icon-circle grey">[fa type="desktop"]</span>

<span class="icon-circle lightgrey">[fa type="desktop"]</span>

<span class="icon-circle tan">[fa type="desktop"]</span>

<span class="icon-circle rust">[fa type="desktop"]</span> 

Screencast – Icons