Image may be NSFW.
Clik here to view.
I have been reading posts and information about Font Icons quite a bit lately so naturally had to dig a little deeper into what they are and how to use them. I’ve downloaded and installed quite a few but was thrilled when I found someone had created a plugin to make the use of font icons MUCH easier! I’d love to tell you that all you need to do is install the plugin, click an icon in the editor and voila! But they’re not quite there yet.
First, what are Font Icons?
Initially I thought this was pretty obvious, but I’d rather not assume everybody is on the same page with WordPress so I searched around a bit to find a definition that I liked and found this definition on Six Revisions in a post titled Free Icon Fonts for Web User Interfaces:
Icon fonts are font files that have symbols and gylphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters.
There’s a little more to the definition that what I’ve posted above, but this post is about how YOU can use font icons in your WordPress site to add a little something to your posts and pages. If you’re a web designer who is already designing web user interfaces you’re probably familiar with font icons and how to use them, if not, there are some great resources available on the web (will list a few at the end of the post).
SO… first, let’s take a look at what some of these look like:
This first sampling is from Font Awesome, which we’ll also be using in the video AND is the font you’ll use in your site (because the ONE plugin I found for font icons uses Font Awesome).
Image may be NSFW.
Clik here to view.
The font icons are the images with the text- so, instead of bullet points the first list shows check marks. Those were created with Font Awesome. Same thing for the buttons, on each of the buttons you see an icon with the text, those were also created with Font Awesome.
Here’s a couple image of Font Awesome larger so you can see the quality (oh, and Font Awesome has hover versions as well! You can see what that looks like in the ‘Directional Icons’ sample. The icon-hand-left is larger. How awesome is THAT?):
Image may be NSFW.
Clik here to view.
Instead of re-inventing the wheel here and creating my own list of Font Icons I’m going to reference and link to a few other ‘list posts’ where you can see samples of font icons and download them directly from there.
The first post which is how I found the plugin I’m going to show you was on WP Lift and is called “20 Free Font Icons”. The site I mentioned above, Six Revisions, where I grabbed the font definition also has a post you can check out (there’s a little overlap, but he mentions a few other ones too). Free Icon Fonts for Web User Interfaces by Six Revisions.
Font Icon Plugin
Image may be NSFW.
Clik here to view.
Enter Rachel Baker!
Rachel Baker left a comment on the post on WP Lift sharing that she had created a plugin that made it MUCH easier to use the Font Awesome icons in your WordPress site with a shortcode or html.
Here’s a screenshot for you that shows you where to download the plugin on github. It’s not quite as obvious as it is in WordPress so I thought I’d show you:
Image may be NSFW.
Clik here to view.
Okie dokie… now let’s get on with the video (notice how I just used a font icon here and next to Rachel Baker’s name? Sneaky, huh?).
Here’s the briefcase example in the post:
You can download the icon PDF by clicking the button below:
Post links
20 Free Icon Fonts Download at WP Lift
Free Icon Fonts for Web User Interfaces at Six Revisions
The post Font Icons – What they are and how to use them [VIDEO] appeared first on StudioPress Genesis Tutorials | WordPress Training | The WordPress Chick.