Introduction to Icons

The Preferential theme comes with a preset of font based icons which gives you the flexibility to size and colour them just like you can with any font (text). This theme uses them for the social icons as well some of the HTML Snippets that you can use and change the icon from the large selection that comes with Preferential.

You can view the available icons by going into your download package of Preferential and then look for the folder named “icons”. Inside that is a demo.html page you can view in your browser. In this icon folder, there are other items and files, such as a font file that you can install on your “Windows” computer so that if you use a graphics program with font capability, you can create mockups and other artwork using the font “icomoon” which is what the icons are.

There is also a file selection.json that allows you to go to the website and update the font icons by adding more or removing any you do not want. This file is like a backup of the font icons used in this theme.

How to Use the Icons

You can use the icons in many ways, such as:

  1. Use on buttons
  2. Use in your page or post content
  3. Use in the theme’s icon based HTML Snippets, such as the Icon Boxes
  4. Use in forms

When adding an icon into your content, the WordPress editor is really finicky, so you will want to be careful how they are added, otherwise after you save the page or post, the editor will strip out the icon. I find the best way to add an icon is either:

<div class="icomoon icon-stack"></div>

Or with the <i> tag like this:

<i class="icomoon icon-stack"></i>

Always add the class “icomoon” and then add the other class for the icon you want to use, for example: icon-stack

NOTE: The WordPress editor does not like empty tags, which is why it will often strip them out, but the two above seem to work. So if the editor is stripping out one of the two options, try the other method.

Screencast – Icons