Font Awesome, the pictographic font designed for use with Twitter Bootstrap | Hacker News Reader

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

fortaweso.me

711 pointsfortawesome91 comments

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

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.

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.

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.

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

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

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

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

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.

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

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

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

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.

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.

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.

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

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

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?

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.

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

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?

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

Yeah that's not normally sufficient for many of the CC licenses (not that I'm an expert), as they often require it to be shown on a visible (i.e. browsable) page, such as a 'credits' page or similar.

Yes, that's just fine. License updated accordingly.

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.

Planned and in the works. The paid version will also include all vector icon files as well as a desktop TTF of the font itself.

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

Absolutely.

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?

I'm re-considering the license for the font itself. I agree, attribution on a commercial site would not be ideal. Attribution in code, however, seems reasonable.

I used the classes from the Glyphicons set for backwards compatibility, but every icon was designed from scratch. If you look closely, you'll notice many of them are quite different.

How about putting it in humans.txt?

Great work! +1 for attribution in the code on commercial sites.

Attribution in code is unworkable if you minify code as it will no longer be there. Coders who are looking that hard will be able to work out where the awsomeness came from. Embrace a sane open source license please, something that would eg allow distribution with Debian.

Minifiers almost always have an option to preserve specially marked comments for precisely this reason (to preserve the license information).

I would have thought attribution using comments in the main HTML would be an easy solution if you're minifying your CSS.

Are you actually planning to sue people for not providing attribution? If not, you might just want to save yourself the headache by using a more permissive license -- BSD and MIT are popular but if you really like Creative Commons, they have the Zero License:

   https://creativecommons.org/publicdomain/zero/1.0/

Up to you, though.

I've updated the license. It's still CC-BY, but the only attribution required is in human-readable code. That means it could be commented in your html, css, or wherever. No need to have it visible in the webpage itself, unless you're feeling generous.

Brilliant. Thanks for the clarification, and for the cool resource!

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.

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

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

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

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

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

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.

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.

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

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

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.

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/

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?

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

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.

I'm considering disabling text in my browser.

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.

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

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

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

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?

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!

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.

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.

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?

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

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.

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.

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

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.

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.

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

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?

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.

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

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

Nice. Definitely let me know how it goes.

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.

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

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

Nice stuff, going to try to use it sometime!

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

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.

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

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

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

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

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

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?

This is seriously great. Thanks!

This looks excellent, nice work.

The website seems to be down.

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

Looks really sharp.

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?

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

Reply on news.ycombinator.com