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.
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?
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.
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.
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.
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.
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.
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.
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:
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 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.
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).
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!
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.
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.
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).
✔ 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.
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.
95 comments
[ 2.3 ms ] story [ 162 ms ] threadWanting 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?
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.
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.
Is this something you can elaborate on?
Actually, what's the advantage of using a commercial, attribution license over a BSD?
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 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.
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.
Did anyone else have eyesore issues when they first saw it?
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.
Watch the repo or follow @FontAweso_me on Twitter to stay apprised of updates.
Corel Draw for windows has TTF exporting built-in. I think this should be an AI feature.
It was originally hosted at fortaweso.me until Hacker News brought it down.
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?
Nice stuff, going to try to use it sometime!
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.
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.
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).
Jammit http://documentcloud.github.com/jammit/ (and presumably other asset packagers) does it automatically.