How can I use Font Awesome in Photoshop and Fireworks?

77

30

So I downloaded Font Awesome and installed the font. Now I'd like to use this font in my designs in Photoshop and Fireworks.

How would I do that?

Kriem

Posted 2013-01-11T12:23:30.750

Reputation: 2 535

www.whatdafontawesome.co.uk select design on the top left, double click an icon. – Luke Snowden – 2014-06-20T11:26:36.210

Answers

113

I found a solution that works for me. Just download and install the font from Font Awesome website. Then, use the Font Awesome Cheatsheet to copy and paste the icons in Photoshop and Fireworks. (or Illustrator or whatever you'd like to use)

Works perfectly!

Kriem

Posted 2013-01-11T12:23:30.750

Reputation: 2 535

Hi, I am using this in Adobe Fireworks. This only worked for me after I restarted fireworks. Also, in the cheat sheet itself, you dont have to first click and load the icon, in the list itself, just highlight the icon (not the text) and copy that, then use the text tool in fireworks and paste it. If you get something that looks like a square, just highlight the square and select font-awesome font – Paul Preibisch – 2014-11-21T01:54:20.993

What @MathiasLykkegaardLorenzen said should be a part of the answer :) i spent last 10 min trying to copy pasting code in different ways. – Imran Bughio – 2015-01-29T15:06:29.603

I guess this did work, but I need to copy from other programs like Inkscape or Word and then paste into Keynote. – David Silva Smith – 2015-04-15T16:47:39.773

It works with Flash as well this way. – pzv – 2015-05-22T09:30:16.447

@ImranBughio I mean, he does specifically say in the answer to copy-paste the icons, I don't know what more you want. – Nick Coad – 2017-01-17T22:38:38.230

@NickCoad It was a little confusing because of the code with every icon, I ended up copying that! Didn't occurred to me I can copy icons directly & I am surely not alone in mistaken that given Mathias comment have 17+ up votes :) – Imran Bughio – 2017-01-18T07:18:26.180

21It should be noted that you need to double-click the icon itself and then copy it. Not the code that is in the parantheses. That will not work. – Mathias Lykkegaard Lorenzen – 2013-05-31T13:22:35.513

19

This worked for me.

  1. Download FontAwesome from http://fortawesome.github.io/Font-Awesome/
  2. Copy font files from "font-awesome/font" to your computer font directory (For Mac: Applications/Font Book)
  3. Select and copy desired icon from http://fortawesome.github.io/Font-Awesome/cheatsheet/ and paste in photoshop with FontAwesome font family selected.

Talha Ashraf

Posted 2013-01-11T12:23:30.750

Reputation: 291

@lee_mcmullen This is exacty the same answer as the accepted one. – Kriem – 2015-08-02T08:30:39.893

3This should be the accepted answer. No install of any third party apps required, just worked. – lee_mcmullen – 2013-07-17T11:08:34.603

7

All these answers are right, but they're all missing one detail. Here's what to do:

  1. If you have an old version of FontAwesome, uninstall it from your computer.
  2. Download and install FontAwesome (http://fortawesome.github.io/Font-Awesome/ - big yellow Download button at the top)
  3. Go to the FontAwesome Cheat Sheet (http://fortawesome.github.io/Font-Awesome/cheatsheet/)
  4. Double-click and copy the actual icon you want to use (none of the text or unicode).
  5. In Photoshop, select the text tool, click in your document to create a text layer, and then paste your icon.

I spent forever using the Move Tool (the default cursor) and trying to paste while in that tool. It doesn't work. You have to create a text layer and paste in there.

Philip Stancil

Posted 2013-01-11T12:23:30.750

Reputation: 71

4

It's a bit annoying to copy and paste icons from the cheat sheet into a text field, then create the outlines for each icon, and aurevilly's illustrator file is both outdated and doesn't contain the labels.

So I made an illustrator file that contains all the icons in Font Awesome 4.0.0 as vector paths next to their labels for quickly narrowing in on an icon and copying/pasting it to Photoshop, Fireworks, Sketch, etc.

Just be sure to have the latest Font-Awesome.otf 4.0.0 installed as per the other answers here.

Jonathan Dumaine

Posted 2013-01-11T12:23:30.750

Reputation: 195

2

Font Awesome to PNG let's you extract perfectly sized PNGs from font awesome. It's awesome.

If you're installing on Mac follow this: https://github.com/odyniec/font-awesome-to-png/issues/9

Yarin

Posted 2013-01-11T12:23:30.750

Reputation: 366