Font Awesome, the pictographic font designed for use with Twitter Bootstrap

by fortawesome • 14 years ago

711 91 14 years ago

Original hosting down, moved to: http://fortawesome.github.com/Font-Awesome/

clarkmoody• 14 years ago

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?

fortawesome24• 14 years ago

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

josephcooney• 14 years ago

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.

Void_• 14 years ago

The website seems to be down.

fortawesome24• 14 years ago

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

jasimq• 14 years ago

Looks really sharp.

fortawesome24• 14 years ago

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

thekungfuman• 14 years ago

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?

fortawesome24• 14 years ago

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

ccollins2• 14 years ago

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-...

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

fortawesome24• 14 years ago

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

ccollins2• 14 years ago

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

vailripper• 14 years ago

This looks excellent, nice work.

patman81• 14 years ago

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

remi• 14 years ago

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.

fortawesome24• 14 years ago

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.

cobychapple5• 14 years ago

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?

fortawesome24• 14 years ago

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.

ars2• 14 years ago

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

patja• 14 years ago

It would be very nice to offer an option to buy away the need for attribution without needing to do so as a one-off request. Glyphicons offers a no brainer price point of $25 to make attribution go away.

cwsaylor3• 14 years ago

For an iPhone app, would a link in the app in an about page work?

dangrossman• 14 years ago

Darn. It's a shame that the icons are the only part of Bootstrap not under the same license. I was hoping this font would change that, but it's going to remain a no-go for commercial sites and apps where the company isn't going to create a "credits" page just to link back to CC-BY licensed stuff. They'll just license Glyphicons instead.

In fact, now I'm curious. You took the Glyphicons set and effectively copied it, yes? I don't see a link to Glyphicons on your site, which their license requires. Aren't you therefore infringing their copyright by creating a derivative work without license?

cwsaylor3• 14 years ago

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

fortawesome24• 14 years ago

Nice. Definitely let me know how it goes.

cwsaylor3• 14 years ago

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.

RollAHardSix• 14 years ago

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?

headbiznatch• 14 years ago

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.

fortawesome24• 14 years ago

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.

MasterScrat• 14 years ago

As an app developer I miss the more real-life oriented icons that appears in Glyphish and Glyphicons. For example a train, meal, beer etc.

Grepsy• 14 years ago

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

chrisacky• 14 years ago

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.

fortawesome24• 14 years ago

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

cobychapple5• 14 years ago

It'd be really interesting to hear from you in more detail about this process, and any gotchas that you came across during the process. If you ever get time for a follow-up blog post I think a lot of people here would enjoy the read.

armandososa• 14 years ago

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.

ars2• 14 years ago

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

TomatoTomato• 14 years ago

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

fortawesome24• 14 years ago

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

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

pagehub• 14 years ago

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

lostsock• 14 years ago

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?

fortawesome24• 14 years ago

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!

jogloran• 14 years ago

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

praxeologist2• 14 years ago

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

Nice stuff, going to try to use it sometime!

fortawesome24• 14 years ago

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

praxeologist2• 14 years ago

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.

ivobos• 14 years ago

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.

fortawesome24• 14 years ago

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

wiradikusuma2• 14 years ago

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?

taejo2• 14 years ago

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.

zshapiro• 14 years ago

This is seriously great. Thanks!

jazzdev• 14 years ago

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.

hellweaver666• 14 years ago

If you only need a low number of icons in a single size, then yes, bitmap icons are probably the way forward, but if you need lots of icons and you need them to be scaleable, then this is a great way to achieve it.

I wish someone would create a tool that lets you pick only the icons you want and compile a new minimal font with just what you need in it (in all the formats necessary for safe cross browser embedding).

justincormack4• 14 years ago

I believe font squirrel http://www.fontsquirrel.com/ can do subsetting for you and then output all formats.

irishstu• 14 years ago

Pictos http://pictos.cc/server/ lets you build an icon font using only the icons you need also

tintin• 14 years ago

✔ 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.

justincormack4• 14 years ago

Not necessarily if you want the weights to match other icons. But in many cases this is the best option.

icebraining• 14 years ago

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.

ot2• 14 years ago

Have you tried embedding the font in the CSS? The overhead if the CSS is gzipped is small, and you save one request and the flashing text when the font is loaded.

Jammit http://documentcloud.github.com/jammit/ (and presumably other asset packagers) does it automatically.

hornbaker2• 14 years ago

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.

weixiyen• 14 years ago

I agree, absolutely brilliant idea. You've essentially solved monochromatic image scaling in the web. I can't wait until genre-specific fonticons come out.

rubyron• 14 years ago

For good measure, I just registered the twitter handle @fonticons, too, which of course you're welcome to have. My contact info is in my profile.

fortawesome24• 14 years ago

Wow. That's a pretty darn good idea. I'll be in touch.

mhartl• 14 years ago

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

hornbaker2• 14 years ago

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

rplnt2• 14 years ago

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• 14 years ago

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

rplnt2• 14 years ago

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.

datagramm• 14 years ago

I'm considering disabling text in my browser.

logical42• 14 years ago

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! :)

ot2• 14 years ago

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...

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

kjhughes• 14 years ago

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• 14 years ago

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/

Font Awesome, the pictographic font designed for use with Twitter Bootstrap

Related Stories