Icons as font instead of img

[andriijas]

Hi

Any reason you opted to include image based icons in bootstrap which are limited to the 16px dimensions?

For example http://somerandomdude.com/work/iconic/ is available as open source fonts - means you can include icons in headers, buttons of various size etc since its vector based.

Could easily be implemented with the same approach as the current icons:

i.foobar:before { content: "X" }

[Antariano]

Yes, I second this. It would allow size and color to change (black doesn't look good on .danger, for example)

[jasny]

There are forks that have this implemented: For version 1.4 have a look at https://github.com/lightglitch/bootstrap-xtra (http://lightglitch.github.com/bootstrap-xtra/) For version 2.0 you can use https://github.com/jasny/bootstrap/tree/2.0-icons

I'm not expecting that this will end up in the main version of bootstrap.

[andriijas]

I know this is why Im surprised bootstrap opted to lock them self in to the 16px corner which feels a little unorthodox to do in 2012.

[mdo]

It boils down to two things:

• There isn't much out there for open source icon fonts. It's a market that I suppose is wide open, but for now extremely limited.
• Aesthetically, I have a high bar and particular style I'd like to support for iconography in Bootstrap. Glyphicons gets us close to that for now.

I'm not opposed to using fonts—that'd be pretty awesome. It's just a matter of availability and quality. if anyone else has other suggestions for a font family to use, do pipe up and I'll check it out.

[geoffreytran]

I'm a fan of iconic due to their licensing and quality.

[pokonski]

@andriijas thanks for the link, nice icon sets!

[jasny]

@markdotto With the vector images of Glyphicons, you can easily create a font. Unfortunately this is difficult license wise. Perhaps you can talk with the designer.

[pokonski]

@jasny, Glyphicons in bigger sizes are sold premium :(

[JakeWharton]

Using a font also brings the affordance of better color control. The pure black icons (in my opinion) don't mesh well with the off-black text.

[jasny]

@pokonski Well sure, I'm willing to pay the 49 bucks. That still doesn't allow me to put it in bootstrap I'm afraid, since you're not allowed to distribute them. http://glyphicons.com/glyphicons-licenses/

[mdo]

As a FYI, I talked to Jan about it over email and he granted us use of the Halflings in Bootstrap so long as they are credited. To help further, I only added a sprite version of the icons—no individual files are added, so that helps him out some.

[pokonski]

I'm sure it does. Used by thousands and promoted by Twitter :)

[andriijas]

Will it at least be possible to exclude these built icons and the additional http request of an image for those who would like to use something else?

@jasny If id like to use https://github.com/jasny/bootstrap/blob/2.0-icons/lib/icons.less with main bootstrap, do I just need to include that icon.less in my less file or do I need anything else (except the font of course)?

[jasny]

@andriijas No that's not the way to do it. I've also modified mixins.less.

You can do a merge (with -Xours) and rebuild bootstrap. You can also fetch my fork and do a cherrypick. The whole thing is in commit https://github.com/jasny/bootstrap/commit/54b22aa388d79a67e072ea54f8429b3b427b9d11

[burningTyger]

here are some good ones too: http://www.ffdingbatsfont.com/erler/index.html FF encourages OS devs to include it.

[brentkirby]

I'll play devils advocate and throw out the issue that using fonts/font-face for icons can and does cause some accessibility concerns. For instance if you use :before or :after to generate content to show an icon, a large majority of screen readers will read that content. (not to mention ie support). If you used the current technique of <i>x<i> some text with an icon in front of it, they would also read the "x". If you were using js to create them that may be a different, I'm not sure on that.

Maybe if it was optional, and the sprite version was still included?

[m5o]

I've found this Set: Web Symbols Typeface http://www.justbenicestudio.com/studio/websymbols/

Web Symbols is a set of vector html-compliant typefaces, so it might be used in any size, color and browser. License OFL

[Antariano]

I approve of websymbols!

[brentkirby]

These might be worth a look... apparently they are supposed to be accessible and won't be read by screen readers (nice set too) http://keyamoon.com/icomoon/#toHome

[andriijas]

actually, what would be the coolest - is if any icon guru would like to make a dedicated bootstrap icon font.

[mneuhaus]

IcoMoon is looking good, sadly it's commercial :(

Most interesting thing about IcoMoon ist the way it handles Screenreaders:

http://www.youtube.com/watch?v=EWq7idrW2yU

[jasny]

Using @media should solve issues with screen readers

@media screen {
   [class*="icon-"] {
      ...
   }
}

http://www.w3.org/TR/css3-reader/#reader

[puzrin]

We are doing webapp, that simplify icon fonts customization for bootstrap http://nodeca.github.com/fontomas/

Hope to fix all issues soon. Let me know, if something can be improved.

[buraktuyan]

@markdotto and all contributors:

How about Entypo - which is new and absolutely free even for commercial use (CC BY-SA):

http://www.entypo.com/

[pokonski]

These are really good!

[andriijas]

@buraktuyan awesome!

Though I doubt that it will be included in bootstrap now that a set was included in 2.0 it has to stick for backwards incompatibility.

[Anahkiasen]

+1 for Entypo, font is in my opinion the way to go, for maximal color/size possibilities. Not to mention CSS3 properties : shadows, borders, gradients, etc. Plus from a standart point of view, @font-face is not to worry about. Every browser after IE5 can display Entypo (.eot format is provided for older IE versions). For those who are worried about semantics and screen readers, Iconic per example used already present Unicode icons to map its icons over. That means that if Iconic can't be displayed, either the original unicon symbol will be displayed, or nothing.

[jasny]

I've implemented the iconic icons for bootstrap 2.0. See http://jasny.github.com/bootstrap/base-css.html#iconic

You can get it by pulling the 'dev.iconic' branch. https://github.com/jasny/bootstrap/tree/dev.iconic

[inmarelibero]

@jasny +1!

[puzrin]

It seems, that iconic needs hinting.

[puzrin]

We did script to rescale & realign Entypo https://github.com/nodeca/fontomas/tree/master/bin . Now it can be combined with iconic/websymbols without problems.

[simonfranz]

+1 for entypo

[mahemoff]

"Though I doubt that it will be included in bootstrap now that a set was included in 2.0 it has to stick for backwards incompatibility."

It shouldn't. Going forward, there ought to be a standard way to combine multiple icon sets, ie a different class name or font-face or whatever.

[davegandy]

I've been following this thread for some time now. I've been looking around myself for an icon font that would cut it, but none were quite good enough. So I made my own. I just finished up Font Awesome, an icon font specifically designed for Twitter Bootstrap.

• Replicates all 120 icons currently a part of TW Bootstrap (yet designed from scratch)
• Adds 30 more
• Passes the screen reader test
• Completely free for commercial use

http://fortaweso.me/font-awesome/

I'd love feedback.

[mahemoff]

Dave, looks awesome!

[puzrin]

+1 . Really awesome.

[Florian-R]

:beer:

[simonfranz]

Dave, this is awesome - nice work :+1: i hope this will find it's way to the bt-rep

[Dentxinho]

:+1: Great!

[Anahkiasen]

Is there still any concrete argument against the integration of fonts instead of images ? I mean now that Dave created a font-replica, I don't think there is any obstacle left, is there ? At least none that outmatches the positive sides brought by fonts in terms of flexibility : any color, any size, any effect and style.

[puzrin]

@Anahkiasen yes, there are some cons. Vector symbols are not fine in small sizes. Care sould be done about hinting. As far as i know, the best autohinter tool now is ttfautohint http://www.freetype.org/ttfautohint/

[davegandy]

I've done a lot to keep the icons readable all the way down to 12px, but some browsers still aren't perfect.

@puzrin Thanks for the link to the autohinter tool. I'll definitely check it out.

[mandric]

:sunny: :rainbow:

[pokonski]

@davegandy impressive! You got almost 700 watchers in 3 weeks :D

[andriijas]

@davegandy you made my dreams come true. You are an hero! Amazing work!

[danielbruce]

Hi all,

I'm the designer designer behind Entypo. I'm currently working on some new glyphs to the suite and I welcome all feedback and ideas for glyphs you feel should be in there.

Cheers

[puzrin]

@danielbruce if you need help with scripting to build fonts - let me know.

[pokonski]

Great to see people helping with fonts. All that hype and popularity is paying off :)

[danielbruce]

@puzrin since I hardly know how to code at all I can use all the help I can get :)

[davegandy]

Font Awesome now has 2,130 followers on GitHub. If I can get hinting sorted better, is there any chance of getting it into a forthcoming version of Bootstrap?

https://github.com/FortAwesome/Font-Awesome