Desktop font

[ghost]

For wireframing on Keynote or Photoshop

[parkerault]

I second this. Our designer wants to use the font in our PSD mockups, but can't figure out which characters are associated with the glyphs.

[lightfuze]

+1

[davegandy]

I'm putting together a desktop version of the font that will be a commercial package bundled with icon vectors and a commercial use-however-you-want-with-no-attribution license.

Right now the font uses the Unicode Private Use Area to make sure screen readers don't read the characters off. This is awesome for the web, but makes it much harder to use on the desktop. So I'm working on figuring that out.

I forget people use photoshop for mockups. I go straight from paper to html.

[parkerault]

Let us know when you are finished so we can give you our money.

[davegandy]

Absolutely.

[diesachbearbeiter]

+1

[jubianchi]

+1

[colinfrei]

I agree, this would be awesome!

[wynlim]

+1

[antsa]

+1

[maxstrebel]

+1

[LindsayBradford]

Hi @davegandy.

You mentioned you weren't sure how to use the font in a desktop setting?

Below, a link through to a Java GitHub repository I'm building where I'm using FontAwesome for my button icons within a desktop utility:

PersonalFinancier repository

With Java Swing, it turns out to be pretty easy. Here's the Java adapter class that draws the font in from a resource bundle, and sets it up for use with Swing buttons:

FontIconProvider

regards,

Linds.

[replete]

+10

[heikohaller]

+1

[Recon3Y3z]

(Y)

[davegandy]

Completed in the new v2.0 release. Let me know if you have any issues installing the font. Though I suspect the raw vectors might be of more help.

[heikohaller]

Cool, thanks!
However (and I feel slightly stupifd for asking this), how can I get to the various awsome glyphs?
I discovered some by typing random text, but is there a documented mapping?
Or can anyone recomend an advanced symbol viewer/picker (for Mac)?

[maxstrebel]

I don't know about the mapping, but I can recommend Fontcase for MAC. Definately worth its price. http://bohemiancoding.com/fontcase/

And THANKS a lot for this release!!!

[chrisjacob]

For Windows use the "Character Map" utility.
http://tlt.its.psu.edu/suggestions/international/accents/charmap.html

[napa-web-designer]

+1 for knowing how to access the various glyphs. I am on a Mac, and I also have Fontcase, but when I pull up the font, there are only 51 glyphs that I see in:

Basic Latin
Latin-1 Supplement
Latin Extended
Mathematical Operators

I can't figure out how to type any expect the Basic Latin, and then I am wondering how to access the remaining beyond the 51.

Anyone know this?

[kremalicious]

Here's a screenshot of the ttf file opened in Glyphs where you can see the characters they are mapped to under them:
http://cl.ly/HCVB

But as you see only 63 can be accessed (51 in Fontcase). Is this different on Windows @chrisjacob?

[parkerault]

I put up a file with copyable glyphs here: http://dl.dropbox.com/u/934214/pastable.html

If you have the system font installed, you should be able to paste those characters into your design tool of choice. Just be sure to select the correct font, obviously.

EDIT: only works in chrome.

[napa-web-designer]

So more poking around I see in Fontcase that when viewing in Glyph view, I can double click an icon and it will tell me what the character is to use, and in some cases like the Highway icon that requires typing Superscript 1 which I could not find a Mac keyboard shortcut for - when viewing the details in Fontcase opened as per above, one can copy to clipboard and then paste in your given program you are using - I am using Fireworks to design with.

Still wondering about the rest though

[kremalicious]

@napa-web-designer did you test the method provided by @parkerault? Looks most easy for now. As for Fireworks, it might be a easier to copy paste from the *Vectors.pdf file opened in Illustrator?

@davegandy Did you remap the glyphs for the desktop font or converted them from one of the other font files? The PUA stuff is most likely involved here

[napa-web-designer]

Thanks. Can't really make sense of what @parkerault did. I went to the dropbox file and there is the list of class names each followed by i little graphic of a square each with 4 characters packed into it - F000, F001, etc. - (is that the Unicode?) Not sure if that is supposed to represent the glyph as I am not familiar with that. Either way, I copied one of those to Fireworks and Word and made sure that the font was selected as FontAwesome and nothing. Just a square with an X in the middle of it. I guess not easy for me.

[parkerault]

Ah, I only tested it in chrome. I see it's broken in firefox.

EDIT: whoops, forgot about cross domain font-face rules in firefox. You'll have to use safari or chrome to view that page.

[napa-web-designer]

Thanks. I see them in Chrome now, but I still cannot use the font in Firefox and have not tried elsewhere. I have made use of the pdf's and am grateful for those anyways. Just want to mock up a design using the fonts to show a client.

[replete]

I can select and copy from @parkerault's useful HTML page, but I cannot use the font in Photoshop (CS5.1). It just switches back to Myriad Pro immediately. Any ideas?

I can also confirm that the Windows' Character Map (charmap.exe) does not show the full range of glyphs.

Also, thanks so much for making this happen.

[parkerault]

@replete Preferences > Type: uncheck "enable missing glyph protection".

[napa-web-designer]

I had the same experience using Adobe Fireworks that @replete explained having with Photoshop. It would always default to Myriad Pro when I copied/pasted from the list that @parkerault put up as viewed in chrome - and I could not take it off that font.

I went into Fireworks to Preferences > Type but there is no such setting in Adobe Fireworks.

Any ideas?

[acontia]

Any idea on how to paste @parkerault icons on Word? I'm just getting a "square icon" like this: 

Thanks for the awesome work!

[matpratta]

I'm trying to paste the Google+ icon on Photoshop CS5, but it doesn't wants to go and all I get is a empty space.

Anyone knows how to fix it?

[heikohaller]

@parkerault's solution also does not work for me :( (thanks anyway though)
When I paste this in OmniGraffle or InkScape (Mac), I get funny glyphs, but not the ones I copied.
I noticed that in the download package, there are several .ttf files included - do they differ? Did I maybe install the wrong one?

Another question regarding the license: Is it allowed to make bitmap versions of FA Icons, e.g. to use in html mails? (a reference to FA would be included in the website's impressum). If not: when can we get the commercial do-what-you-want package and what willit cost?

[kremalicious]

Well, it looks like the only solution would be to remap the glyphs to real characters in the desktop ttf so the icons can be accessed with the keyboard.

@heikohaller as the cc by 3.0 states, you're free to remix this work as long as you credit the original. So effectively you're free to do whatever you want, you're just not allowed to say it's your own work. If you want to discuss the licensing you can jump into #2 or #265. As you see, the direction the licensing is going is almost completely the opposite to your license request. Font Awesome is meant to be an addition to Twitter Bootstrap and will most likely always use a similar term license. If you're looking for commercial projects take a look at IcoMoon or iconSweets 2 Deluxe.

[matpratta]

@kremalicious Well, couldn't we make a separate font file with this glyphs on charactes, maybe "Font Awesome Desktop"...

[sway]

In case anyone was wondering how to use FontAwesome in LaTeX, I created a "translation table" to be used with XeLaTeX: https://gist.github.com/3101743

More info: http://coderwall.com/p/r67dyq

[alsoicode]

One way to start leveraging the vectors in Fireworks is to simply change the file extension from .pdf to .eps, allowing you to open the file and copy/paste the icon vectors into your design.

[budi]

haven't read this one and yet I posted #392 a week ago..

[mindfullsilence]

I separated the pdf out into individual pages as an easier way to place the icons in photoshop. Makes it a lot easier for resizing and keeps you from having to use a layer mask. Also, if you use file > place, or drag and drop, then the layer will be a smart object. Right clicking on the smart object and choosing "edit contents" will open the icon in illustrator, where each page has an appropriately named artboard (good for developers who need to know which icon is being used). Not really sure how to use git unfortunately. The branch is here: https://github.com/mindfullsilence/Font-Awesome

I have absolutely no clue how to use git so if anyone is interested in helping walk me through submitting a whatever to make this an official whatever I'm all ears :P

[RabidPuffin]

I made a .csh for Photoshop users. Hope this helps!

https://www.dropbox.com/s/xo30riu4q0puty9/Font%20Awesome.csh

[nicinabox]

@RabidPuffin you rule

[psylabs]

@RabidPuffin you do indeed rule. Thank you!!

[RabidPuffin]

Happy I could help. I'd love for them to include the shapes with their download if they'd like. Just killed me always having to pull from Illustrator every time I wanted an icon.

[khromov]

@RabidPuffin Thank you, your shape file helped out a ton! Font-Awesome maintainers should merge this file into the repo.

[chopsticksandspoon]

@RabidPuffin just in time! I was searching how to do this awhile ago. Works great!

[feelfree82]

@RabidPuffin Cheers for this mate. Can someone please include a link for this on font-awesome website?

[budi]

@feelfree82 I think it's already included in docs/design.html (and this ticket should be closed)

[duggi]

in case anyone else stumbles across this thread, here's an illustrator file with a font artboard, and an outlined artboard:

https://dl.dropboxusercontent.com/u/55917936/font-awesome-sheet.ai

[drewww]

@duggi a+, thanks so much. Exactly what I was hoping to find at the bottom of this thread!

[matpratta]

Thanks VERY much, @RabidPuffin and @duggi!!!! Exactly what I needed!

[sirNemanjapro]

@duggi from "icon-expand-alt" till the end, there are no glyphs.

[Preen]

@duggi - THANKS :)

[RobinQu]

@duggi GJ!

[stuart-sge]

Has anybody had an issue where recently added characters are not available in the desktop? I've had great luck using the cheat sheet to copy icons into my Illustrator comp. This works for, seemingly, all but the most recent additions (including the Apple icon, as an example).

When examining the font in Fontcase, I see only 250 Private Use characters, rather than the >300 that I imagine I should see... I am specifically using 3.2.1.

[lizzzzard]

I can not embed the font in Powerpoint. This seems to be due to the license set when installing the font on windows. Only fonts with license "installable" can be embedded; Fontawesome is set to "print and preview" (translated from german). Are you aware of this?

[tagliala]

@lizzzzard is this the same issue of #2517 ?

[lizzzzard]

Yes. But the fix there doesn't help - will comment over there.

[mitcheal]

I noticed when trying to download the .csh file above by Rabidpuffin that the shape file doesn't work in my version of Photoshop (CS6). Does anyone have an updated version of Font Awesome shapes in a .csh file?