Using Font Awesome Pretty Much Anywhere

Posted on: March 25th, 2014

If you’ve not heard of Font Awesome, you need to go check it out now. I’ve frequently tried to copy/paste the Font Awesome page into my Photoshop projects, but to no avail. It just doesn’t quite work that way.

fontawesome

Thankfully smarter internet users have banded together to create some simple ways to create and use the Font Awesome library pretty much anywhere.

Step 1 – Download

Download the items available on the Font Awesome site. This will include CSS, SCSS, LESS, MORE, and fonts. The fonts are the important part for what we’re doing. Open that sucker up and head to the next step.

Step 2 – Install

There are some different font specimens in the font folder, so download whichever applies to your operating system. Generally the OTF will be fine, but some need to use TTF as well. If you end up using the WOFF or EOT let me know why, because I’m a curious man.

After installation the font should appear as an option in Photoshop and any other application that uses fonts. Seriously, even the Microsoft Office Suite allows you to use Font Awesome and if they allow it, think of who else does.

fontawesomeicons

Step 3 – Use Them Font Icons

This was the step that I always missed when originally trying to conjure up icons in my designs. To use the icons go to the Font Awesome cheatsheet and copy/paste the icons. Now you can update colors as you would with any piece of text as well as change the size (vectors, weeeeeee) and add any effects you’d like.

Running List of Programs that Allow Font Awesome

Microsoft Excel
PowerPoint
Word
Photoshop
Illustrator
After Effects
Premiere Pro

And those are just the programs that I’ve tried. If you want to add to the list just let me know below.

Stupid Moments

I see now that on the cheat sheet it straight up says “Print this page to PDF for the complete set of vectors. Or to use on the desktop, install FontAwesome.otf and copy and paste the icons (not the unicode) directly into your designs.” If I’d seen that when I originally started using Font Awesome, it would have saved me a lot of headache. Such is life. Carry on.

Use It In WordPress

There are several plugins that help with the implementation of Font Awesome in WordPress. “Font Awesome” is a good example of a free version, but you need to use shortcodes or know the symbol and it’s on an old version of Font Awesome. For the latest in Font Awesome, you can use MaxButtons Pro which lets you select the icon from a drop-down menu and plop it easily into a button. Past that there are a lot of “properly installing Font Awesome in WordPress” articles.

Tags: , ,

previous post: array_filter() is Your Friend next post: Sticky Nav After Scroll – Olly McTwist 580