Using Font Awesome Pretty Much Anywhere

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.

Subscribe
Notify of
guest
13 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ahmar Karim
Ahmar Karim
6 years ago

great job dud… i like it… and it helps me to make my website fantabulus and mindbugling 🙂 thank you so much for this stuff…

Skip
Skip
6 years ago

Thanks for the write up. I downloaded the OTF and installed on my Mac. However FontBook only shows 32 icons under the FontAwesome folder? I expected a lot more.

Pat
Pat
4 years ago
Reply to  Skip

I have the same problem as Skip. I’ve used this method on a PC but OS X seems to handle it differently for some reason.

John laPlante
John laPlante
5 years ago

I have a list of font icons (not FontAwesome) that I only have the unicode. I would like to past them into Excel but am unable to figure out how to en mass get Excel to render these – I’m looking to make a table with each icon in a row on the first column. I’ve tried using MS Windows Character Map or the Insert Symbols dialog and could go through the 1500 icons and click insert for each but it would take me a long time.

Jenna
Jenna
5 years ago

You can also use the insert > symbol function in MS word & power point. It also works in Paint.net

Mike WB
Mike WB
5 years ago

Thanks for the tip – I did notice that it only works in Safari on the Mac. It doesn’t copy correctly if you use Google Chrome. Other browsers may work, but these are the only ones I tried.

Cheers!

Paul
5 years ago

hi there,

DL font awesome and installed TTF + OTF in windows fonts directory (Win 7 PRO 64bit). After reboot, I started Word 2010, but when ich copy&paste an icon for the cheatsheet, I just get a square, but no icon !!!!

any clues?!

Paul
5 years ago

oh – and I also tried outlook & OneNote – but no success.

Only in Paint.net it seems to work, but not in MS Products

Derek
4 years ago

Hi John, a handy guide! When I went to the fontawesome website, somehow I missed the part about installing and just tried copy/pasting from the cheat sheet.

Have you had any luck embedding these in an MS Office file and sending the file on to someone else who doesn’t have the font installed? I’ve tried ticking the ’embed fonts in file’ box under ‘Save options’ but it doesn’t seem to have the effect I’m hoping for.

George Patrick
George Patrick
4 years ago

Tried using this in Word 2016 unfortunately, it did not work. I guess I have to resort to another icon set to use.

Maria
Maria
4 years ago

comment image Thanks for the info! Although I went through these steps and for some reason when I copy and paste into PowerPoint with the FontAwesome font installed and selected, it is pasting in nothing in the icons. Basically just black squares. Any suggestions or steps I am missing here? I am using PowerPoint 2010, which could be the problem.

HassaanM
4 years ago
Reply to  Maria

I was facing the exact same problem. The workaround I used was to open up the Insert Symbol dialog. Though not as convenient as copy-pasting, but it works.comment image

Felipe
Felipe
3 years ago
Reply to  HassaanM

This worked for me! Thanks HassaanM

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

13
0
Would love your thoughts, please comment.x
()
x