8 ms·
Font Awesome, the pictographic font designed for use with Twitter Bootstrap
Original hosting down, moved to:
http://fortawesome.github.com/Font-Awesome/
- deleted 15y ago[deleted]
- clarkmoody 15y agoThis 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 15y agoOnly the webfont is available currently, so you won't be able to install it on your system.
- josephcooney 15y agoIs 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_ 15y agoThe website seems to be down.
- fortawesome 15y agoUp in a new location: http://fortawesome.github.com/Font-Awesome/ http://fortawesome.github.com/Font-Awesome/
- jasimq 15y agoLooks really sharp.
- fortawesome 15y agoIt's been moved to a proper location: http://fortawesome.github.com/Font-Awesome/ http://fortawesome.github.com/Font-Awesome/
- deleted 15y ago[deleted]
- thekungfuman 15y agoDoes 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 15y agoShould 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 http://twitter.github.com/bootstrap/base-css.html#icons
- ccollins 15y agoFirst, 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-less.png 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.
- fortawesome 15y agoThanks for the example. I'll start work on hinting next to see what I can do at the default size.
- ccollins 15y agoCool - what are you using to edit the fonts? Any way I could help?
- fortawesome 15y agoAbsolutely you can help. I'll drop you an email.
- vailripper 15y agoThis looks excellent, nice work.
- patman81 15y agoNow if we just had a tablet computer with a super high resolution display, this would be perfect for it...
- remi 15y agoIt 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 15y agoThat'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.
- cobychapple 15y agoYou 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 15y agoGood 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 15y agoIs a comment in the stylesheet where the font is defined OK? That's what I usually do when the license requires attribution.
- phillmv 15y agoI 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 15y agoNone. Advertising clauses were removed from pretty much all BSD licenses as they are unworkable.
- cobychapple 15y agoYeah 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.
- fortawesome 15y agoYes, that's just fine. License updated accordingly.
- cwsaylor 15y agoThis is fantastic. I'm going to try to use this in a Phonegap iPhone app right now.
- fortawesome 15y agoNice. Definitely let me know how it goes.
- cwsaylor 15y agoDropped right in. You can see it here: https://skitch.com/cwsaylor/883te/font-awesome-phonegap 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 15y agoGood call on the thumbs. I'll vertically center it better visually.
- RollAHardSix 15y agoMaybe 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 15y agoI 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 15y ago1) 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 15y agoAs 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 15y agoTried to follow, but guess that handle should be @fortaweso_me, correct?
- fortawesome 15y agoHah! Yes it should be. Bad that I'm confusing myself.
- chrisacky 15y agoWhat 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 15y agoI used Illustrator to make the vectors, copied directly into Fontographer, saved as TTF, then converted to webfont with Fontsquirrel.com.
- cobychapple 15y agoIt'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 15y agoSlightly 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 15y agoThere 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).
- ars 15y agoSo, are fonts the way to get scalable graphics on websites?
- TomatoTomato 15y agoFont Awesome or Fort Awesome... I'm confused.
- fortawesome 15y agoFort Awesome is the organization, Font Awesome is the product. It was originally hosted at fortaweso.me until Hacker News brought it down.
- pagehub 15y agoWow, this is awesome... thanks for sharing!
- lostsock 15y agoLooks 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 15y agoNope, 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 15y agoI 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 https://github.com/jogloran/Font-Awesome
- praxeologist 15y agoRequest: an empty/reverse/outline icon-tint or droplet Nice stuff, going to try to use it sometime!
- fortawesome 15y agoCheck out icon-tint. Does that one cover it?
- praxeologist 15y agoHalfway, 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 15y agoLooks 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 15y agoSo 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 https://github.com/FortAwesome/Font-Awesome/issues
- wiradikusuma 15y agoJust 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 15y agoFontForge 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 15y agoThis is seriously great. Thanks!
- jazzdev 15y agoYes, 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 15y agoIf 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).
- justincormack 15y agoI believe font squirrel http://www.fontsquirrel.com/ http://www.fontsquirrel.com/ can do subsetting for you and then output all formats.
- irishstu 15y agoPictos http://pictos.cc/server/ http://pictos.cc/server/ lets you build an icon font using only the icons you need also
- tintin 15y 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.
- justincormack 15y agoNot necessarily if you want the weights to match other icons. But in many cases this is the best option.
- icebraining 15y ago
- hornbaker 15y agoBrilliant. 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 15y agoI agree, absolutely brilliant idea. You've essentially solved monochromatic image scaling in the web. I can't wait until genre-specific fonticons come out.
- hornbaker 15y agoFor 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.
- fortawesome 15y agoWow. That's a pretty darn good idea. I'll be in touch.
- mhartl 15y agoDude, hornbaker, you're a mensch. I love it when people do stuff like this.
- hornbaker 15y agoThanks, but he hasn't contacted me yet. Putting up a competitive site now. j/k :)
- fortawesome 15y ago
- rplnt 15y agoI 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 15y agoGood question. What should happen when people also have images disabled (because of abuse by many developers)?
- rplnt 15y agoI 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 15y agoI'm considering disabling text in my browser.
- logical42 15y agoThis 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 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! :)
- ot 15y agoThe 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/10256947.aspx http://blogs.msdn.com/b/oldnewthing/archive/2012/01/16/10256... (The blog name "Old New Thing" is spot-on as always :) )
- kjhughes 15y agoAnd character set graphics (code page 437 from IBM PC http://en.wikipedia.org/wiki/Code_page_437 http://en.wikipedia.org/wiki/Code_page_437, PETSCII from Commodore PET http://en.wikipedia.org/wiki/PETSCII http://en.wikipedia.org/wiki/PETSCII, etc) predates the Windows technique, albeit without scaling.
- tnorthcutt 15y agoI 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/ https://services.google.com/fb/forms/submitafont/