The Preferential Lite 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 Lite.
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 icomoon.io 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:
- Use on buttons
- Use in your page or post content
- Use in the theme’s icon based HTML Snippets, such as the Icon Boxes
- 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.
Download the Icon Reference
At the moment, I am making the icon reference as an image (see below) that you can save to your computer. I will be creating a PDF soon which will replace the image of icons you see below. Each icon shows what it looks like, along with the icon name (the CSS class), and below each one you will see a code which is used in a stylesheet:
