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
- Go to Plugins >> Add New
- Type in the search: Font Awesome Shortcodes
- 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:
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:
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>
