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.
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.
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.
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.
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.
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'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.
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.
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.
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:
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.
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, 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.
✔ 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.
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.
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).
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.
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?
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.
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! :)
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.
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.
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.
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.
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.
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?
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.