

Font Awesome, the pictographic font designed for use with Twitter Bootstrap - fortawesome
http://fortaweso.me/font-awesome/
Original hosting down, moved to:
http://fortawesome.github.com/Font-Awesome/
======
hornbaker
Brilliant. I absolutely love this, and will absolutely use Font Awesome in my
next project.

While the name Font Awesome is catchy, it doesn't say much about the product,
and won't carry seo juice or meaning for your main selling point: better
icons. A name like "fonticons" (pronounced like "emoticons") might be
stronger, and you could _own_ that term which may go generic (like "kleenex")
if the technique is widely adopted.

In fact, you could literally own it. After making sure a google search was
relatively clean, and a USPTO.gov trademark search was clear, I just
registered the domain fonticons.com, and would be happy to give it to you if
you want it as a token of appreciation for your project.

~~~
mhartl
Dude, hornbaker, you're a mensch. I love it when people do stuff like this.

~~~
hornbaker
Thanks, but he hasn't contacted me yet. Putting up a competitive site now. j/k
:)

~~~
fortawesome
Whoa, I sent you an email yesterday. Double-checking the email spelling...

------
ccollins
First, this is great. The Bootstrap Sprites definitely need some love and this
is a solid forward step.

I am close to dropping in Font Awesome, but the small font sizes really need
work. Here is a comparison screenshot of the standard bootstrap sprites vs
font awesome sprites in Chrome on Mac:
[https://s3.amazonaws.com/gusta/sprites-less-vs-font-
awesome-...](https://s3.amazonaws.com/gusta/sprites-less-vs-font-awesome-
less.png)

Again, awesome work. Font Awesome is on my short list to use once it's cleaned
up a bit.

~~~
fortawesome
Thanks for the example. I'll start work on hinting next to see what I can do
at the default size.

~~~
ccollins
Cool - what are you using to edit the fonts? Any way I could help?

~~~
fortawesome
Absolutely you can help. I'll drop you an email.

------
headbiznatch
I love font icons and these are great. Thanks for sharing.

Two notes:

1) When I first started using font icons, I encountered an issue that might be
worth sharing - you need to make sure your web server properly handles the
more esoteric file types that are included in the @font-face declaration.

2) Paperclip icon!!!! I'm sad when these icon sets are missing this very
useful metaphor for "attachment": not "my dog just died" sad, more like "I
wish I could fly" sad. I am just throwing that out there.

~~~
fortawesome
1) Good catch. I'll look into what's going on there. 2) I like the idea for a
paperclip icon. I'll look into adding that into the next version.

Watch the repo or follow @FontAweso_me on Twitter to stay apprised of updates.

~~~
Grepsy
Tried to follow, but guess that handle should be @fortaweso_me, correct?

~~~
fortawesome
Hah! Yes it should be. Bad that I'm confusing myself.

------
cobychapple
You have licensed this under the CC-BY 3.0 license (which requires attribution
'in the manner specified by the author'), but I can't see anywhere that you've
specified how it needs to be attributed if used.

Is this something you can elaborate on?

~~~
fortawesome
Good catch. I'll clarify in the docs, but a link back to the project somewhere
accessible and on the same domain will suffice. I'm also happy to make
exceptions on a case by case basis, also in accordance with the CC BY 3.0.

~~~
ars
Is a comment in the stylesheet where the font is defined OK? That's what I
usually do when the license requires attribution.

~~~
phillmv
I feel like that would follow the intent behind a BSD license, but not that of
a CC-BY.

Actually, what's the advantage of using a commercial, attribution license over
a BSD?

~~~
justincormack
None. Advertising clauses were removed from pretty much all BSD licenses as
they are unworkable.

------
jazzdev
Yes, very awesome. Makes implementation much easier. But having just removed a
font from our web app to improve performance (download time and rendering
time) I can't help but wonder if sprites aren't lighter weight than using a
whole font when you only need a few icons.

~~~
tintin
✔ it's also good practice to check unicode first. Arrows for example are
available in all shapes and directions. ➜ So if there is an icon available in
unicode just use that one.

~~~
icebraining
Support unicode doesn't necessarily mean the client has a compatible font. I
couldn't see the "look of disapproval" emoticon (ಠ_ಠ) without having installed
an appropriate font, for example.

------
fortawesome
It's been moved to a proper location: <http://fortawesome.github.com/Font-
Awesome/>

------
ot
The icons look great! The font rendering engine is still the cheapest and most
convenient way for having small scalable graphics.

Note that this trick is as old as Windows 3.1, as Raymond Chen points out in
his blog:

[http://blogs.msdn.com/b/oldnewthing/archive/2012/01/16/10256...](http://blogs.msdn.com/b/oldnewthing/archive/2012/01/16/10256947.aspx)

(The blog name "Old New Thing" is spot-on as always :) )

~~~
kjhughes
And character set graphics (code page 437 from IBM PC
<http://en.wikipedia.org/wiki/Code_page_437>, PETSCII from Commodore PET
<http://en.wikipedia.org/wiki/PETSCII>, etc) predates the Windows technique,
albeit without scaling.

------
tnorthcutt
I don't know if it would make sense for your plans, but have you considered
looking into getting fontawesome added to Google's Webfonts collection? That
could help drive mass adoption. Here's their submit form:
<https://services.google.com/fb/forms/submitafont/>

------
rplnt
I have web fonts disabled (because of abuse by many developers) and this looks
like rubbish. Perhaps there is way to fall back to image icons if font is not
available?

~~~
melvinmt
Good question. What should happen when people also have images disabled
(because of abuse by many developers)?

~~~
rplnt
I don't think many people have images disabled. Images are part of the web for
a long time, however fonts are quite new and now every other blogger thinks
it's a great idea to have a special, preferably unreadable, font.

But maybe you are right and the image fall-back is not such a great idea. I
don't really know how characters are mapped to other font if one is not
available but perhaps it would be possible to map them to something better in
"standard fonts"? Just guessing here.

------
ivobos
Looks good. Having a set of geo-location icons would make it even better. In
particular:

1) Request geo-location - this icon can be used on buttons that request the
device/browser to activate geo-location.

2) Location on map - this icon can be used on buttons that display locations
on map.

~~~
fortawesome
So noted. So I don't forget, want to add a couple of issues to request the
icons on the GitHub project? <https://github.com/FortAwesome/Font-
Awesome/issues>

------
jogloran
I wondered how these would look as iOS tab bar icons — I added a script to
generate them using ImageMagick: <https://github.com/jogloran/Font-Awesome>

------
logical42
This is terrific! I've ported your fonts into my variant of the many twitter
bootstrap rails gems out there (<https://github.com/logical42/Bootstrapped-
Rails>). Thanks a bunch for this great work! This is going to make my life,
and many others, much easier! :)

------
lostsock
Looks great,

I've just tried to implement them into a Bootstrap site (without LESS) and I
seem to get a double up of icons.

It looks like both the default bootstrap icons and the Font Awesome icons are
being shown. The instructions don't mention the need to download a custom
version of Bootstrap, am I doing something wrong?

~~~
fortawesome
Nope, you didn't do anything wrong. I just didn't get a chance to test the CSS
version before releasing. Feel free to open an issue on the GitHub project,
and I'll get right on it!

------
remi
It says “Wide @font-face support means Font Awesome even works in IE4” but not
as the way it is implemented on the demo page.

That technique is not compatible with browsers that do not support the :before
pseudo-class (eg. IE7). The icons could be used though, but not that way.

~~~
fortawesome
That's a great point, as far as the the LESS and CSS go, which were optimized
for Twitter Bootstrap. If you're not using that TWBS, Font Awesome would just
take a bit more work with CSS. That's a great idea for a fork.

------
clarkmoody
This is a great idea!

Wanting to use this font offline, I was trying to install the .ttf to my
Windows fonts, but I was unable to do so. Windows claims that it is not a
valid font file.

Any suggestions on why this is the case?

~~~
fortawesome
Only the webfont is available currently, so you won't be able to install it on
your system.

~~~
josephcooney
Is there any way it can be converted to a 'valid-according-to-windows' TTF
file? I'd love to embed this in an app. If the process is a bit involved I'd
be happy to give it a try if you give me a few pointers.

------
chrisacky
What application did you use to make these fonts in the first instance? I
would quite like to have a go at making my own font icons. Could be quite
useful in replacement of spritesheets.

~~~
fortawesome
I used Illustrator to make the vectors, copied directly into Fontographer,
saved as TTF, then converted to webfont with Fontsquirrel.com.

~~~
armandososa
Slightly offtopic, but why is Font making software so damn expensive? I'd love
to help on this and other open source font efforts but there's no way I am
buying $400 software.

Corel Draw for windows has TTF exporting built-in. I think this should be an
AI feature.

~~~
taejo
There is an open-source font-making program called FontForge. Some people
complain about it but I've used it to make several fonts without too much
difficulty (besides, of course, the inherent difficulty of designing a good
typeface).

------
wiradikusuma
Just wondering, is it possible to combine this with the font we use in the
website so we don't need to download two separate fonts? Maybe some command
line tool?

~~~
taejo
FontForge has a "Merge fonts" command. It's scriptable in Python, though that
command doesn't seem to be part of the API. It would probably not be hard to
implement the same functionality simply adding glyphs in a loop... or to add a
function to the Python API.

------
patman81
Now if we just had a tablet computer with a super high resolution display,
this would be perfect for it...

------
cwsaylor
This is fantastic. I'm going to try to use this in a Phonegap iPhone app right
now.

~~~
fortawesome
Nice. Definitely let me know how it goes.

~~~
cwsaylor
Dropped right in. You can see it here:
<https://skitch.com/cwsaylor/883te/font-awesome-phonegap>

To get it looking really good, I'll need to play with the button padding and
the font size. This is using mini buttons with large icons.

I also noticed that the thumbs up/down next to each other has the optical
illusion of not looking centered.

~~~
fortawesome
Good call on the thumbs. I'll vertically center it better visually.

------
praxeologist
Request: an empty/reverse/outline icon-tint or droplet

Nice stuff, going to try to use it sometime!

~~~
fortawesome
Check out icon-tint. Does that one cover it?

~~~
praxeologist
Halfway, but I could foresee using a sort of reverse image version of it on
the project I just started. I am talking about how you extended icon-heart to
icon-heart-empty.

I guess you would take the little "white" mini drop/glare inside and turn it
black, then remove the fill and just keep the outer drop outline. If it looks
okay and isn't too much trouble, I would probably put it to use. I do have an
old version of some font software I might be able to figure it out if you end
up sharing files too.

------
ars
So, are fonts the way to get scalable graphics on websites?

------
TomatoTomato
Font Awesome or Fort Awesome... I'm confused.

~~~
fortawesome
Fort Awesome is the organization, Font Awesome is the product.

It was originally hosted at fortaweso.me until Hacker News brought it down.

------
pagehub
Wow, this is awesome... thanks for sharing!

------
RollAHardSix
Maybe it's been a long day, but this actually hurt my eyes. _Too Perfect!!
O_O_

Did anyone else have eyesore issues when they first saw it?

------
zshapiro
This is seriously great. Thanks!

------
vailripper
This looks excellent, nice work.

------
Void_
The website seems to be down.

~~~
fortawesome
Up in a new location: <http://fortawesome.github.com/Font-Awesome/>

------
jasimq
Looks really sharp.

------
thekungfuman
Does using the <i> tag have any negative effect on the semantic markup of a
page? I see that it doesn't impact screen-readers but what about if someone is
trying to parse your HTML?

~~~
fortawesome
Should also work just fine with the <span> tag. <i> is just shorter. I went
with the same method Twitter Bootstrap 2.0 is using for their fixed-size
icons: <http://twitter.github.com/bootstrap/base-css.html#icons>

