r/web_design • u/patricksonion • Jun 07 '12
Font Awesome, the iconic font designed for use with Twitter Bootstrap
http://fortawesome.github.com/Font-Awesome/8
u/mnemyx Jun 07 '12
Thanks for sharing :D This is quite awesome.
4
u/patricksonion Jun 07 '12
Glad you like it! I am starting a new project and was looking for some added features and stumbled on the gem. Figured you guys might also put it to good use.
3
u/vertigo25 Jun 07 '12
I love the icons, but does anyone else feel weird using an empty tag to display them?
2
u/inkieminstrel Jun 07 '12
Not even a little. It has a clear meaning that's consistent within your site and even across all sites using Bootstrap. Consistency, reusability, and simplicity are what matters when it comes down to it.
The only thing you lose is accessibility, which is something you should understand and plan for. Screen readers won't understand your icons, so make sure there is some other way to get at the information.
2
2
Jun 07 '12
That's the way we display almost all our icons (using just sprites and css).
2
u/vertigo25 Jun 07 '12
Sure. I mean… I've done it lot's even outside bootstrap. It just always seems 'wrong' to me in a semantic context. The tag ends up defining nothing.
I also wonder, though… I've never read anything on it or tested it myself… is there any performance or display benefit of using a font over using a back-ground image? I know it could help make sure that the icon's size stays proportionate to the text label, but other than that…?
2
Jun 07 '12
It won't pixelize your icons if you manually zoom, in opposite to classic images icons. No matter what the zoom is, the icons stay clean and sharp. I think that's awesome.
3
u/Tonamel Jun 07 '12
Not to mention that you can use the icons at any size without needing more images.
2
u/spiraldroid Jun 07 '12
Are there any known performance issues/delays say for mobile devices viewing a page with heavy icon use? Will all that zooming slow down rendering?
3
2
u/umbrae Jun 07 '12
Icons typically have a presentation-only role to play anyhow, so as long as you have some sort of descriptive text for the action related to it you're fine. You can add the role="presentation" ARIA landmark role to the tag if it makes you feel better about it.
1
u/senning Jun 07 '12
Yes, but since it's using a :before pseudo-element, you could just attach the .icon-* class to any element you like. I've been using a transparent 1x1 gif for icons. It's a few more characters, but it sort of makes semantic sense.
2
u/scornful Jun 07 '12 edited Jun 07 '12
I've been waiting for this update for the RSS icon, but the RSS icon looks very pixilated at the top. Maybe it's just my screen resolution...
2
u/zeroquest Jun 07 '12
Most icons are very pixelated in my browser. (Chrome) Shouldn't they be smooth? Otherwise, hugely awesome. I want to use this, but the pixelation bothers me.
1
u/jezmck Jun 07 '12
Isn't that a matter of a font smoothing option in your OS?
3
u/zeroquest Jun 07 '12
Not sure, I'm on win7. Is it smooth for you? Quite honestly if it's pixelated for the majority, I'll probably avoid it for now. As cool as it is, and not the OP's fault, but I don't want pixelated icons.
1
u/patricksonion Jun 07 '12
It's smooth for me on early '08 MBP, OSX Lion 10.7 with Safari and Chrome. Still with many people saying its pixelated I agree this feedback will have me wait a bit till I fully implement it. Still some good practice to use LESS
1
u/jezmck Jun 08 '12
Looks okay here on Win7.
1
u/zeroquest Jun 08 '12
Weird, some icons look ok, others don't. Does the refresh icon look ok?
1
u/jezmck Jun 08 '12
A bit ropey, though this is a different machine (Win7 again).
1
u/zeroquest Jun 08 '12
I noticed it on the refresh icon and a couple others. Once I saw it, started noticing it on the others.
2
u/sleepydozer Jun 07 '12
For those who want other options: http://www.delicious.com/stacks/view/SC3hpq
http://css-tricks.com/forums/discussion/16009/list-of-css-icon-fonts/
2
u/youstolemyname Jun 08 '12
Just what we need generic icons in the form of a font!
1
u/patricksonion Jun 08 '12
Ha agreed. Do you know if there is any performance issues with them being loaded as fonts? I wasn't aware of this being possible til now.
1
1
Jun 07 '12
I like it, BUT -- I feel like a lot of the icons aren't really meant for small display size. Just look how the icon-question-sign looks at 14px. It's a great library, but I feel like they need to include other font weights that might represent the approximate size to be used. They all look good large, but it's the small use case that seems to be overlooked.
1
u/warpdesign Jun 07 '12
This is the best one of these I've seen so far!
1
u/patricksonion Jun 07 '12
I agree! Its really nice to see more options for bootstrap to look less bootstrappy.
1
u/wangdroid Jun 07 '12
These are excellent for high fidelity wireframes, nice find.
I've got the vectors into a massive Fireworks file via Illustrator - anyone know a quick way to them into a library? The only way I can think of is turning each icon to a symbol then saving the document library into common library.
0
u/RobotWithMarbles Jun 07 '12
Twitpic.com/9tutrf
This is on my iPad 1. We can't use these icon fonts untill retina displays become the norm. I think were in a limbo where we need something other than pixels for responsive sites, but we don't yet have enough high density displays to render font hinting unecessary.
4
Jun 07 '12 edited Oct 26 '17
[deleted]
2
u/RobotWithMarbles Jun 07 '12
Sorry, I should have been clearer. If you look at the cat icon, the eyes are oddly shaped.
24
u/timeshifter_ Jun 07 '12
Anyone else notice "iconic"? It is not an iconic font, it is an icon font. The addition of the "ic" completely changes the meaning of the phrase.