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 jasny/bootstrap@54b22aa

[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

[davegandy]

Font Awesome 3.0 is coming out this month.

• Redesigned from the ground up for pixel perfection at Bootstrap's default 14px
• New LGPL compatible license
• 20%-30% smaller font sizes
• and Font Subsetting so you only get the icons you need.

It's not completely done yet, but here's a screenshot from Safari:
http://cl.ly/image/2m3M0k2l2Q12/o

[Shipow]

Great job !

davegandy a écrit:

Font Awesome 3.0 is coming out this month.

• Redesigned from the ground up for pixel perfection at Bootstrap's
  default 14px
• New LGPL compatible license
• 20%-30% smaller font sizes
• and Font Subsetting so you only get the icons you need.

It's not completely done yet, but here's a screenshot from Safari:
http://cl.ly/image/2m3M0k2l2Q12/o

—
Reply to this email directly or view it on GitHub
#966 (comment).

[davegandy]

Just for the record, Font Awesome 3.0 is out. It's been redesigned from the ground up for pixel perfection at Bootstrap's default 14px (and looks great at any size larger).

You guys rock. Thanks for making Bootstrap. And best of luck in your new endeavors.

[gustavohenke]

Amazing!

[demike]

Really great work! I use 3.0 in a project and the change (dead simple) is really worth it. The icons look extremely crisp and sharp.

[adamjgrant]

Excellent work, Dave. Just added this to Kickstrap.

Le jeudi 3 janvier 2013, demike a écrit :

Really great work! I use 3.0 in a project and the change (dead simple) is
really worth it. The icons look extremely crisp and sharp.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/966#issuecomment-11835634.

Adam Kochanowicz

[alexandrejobin]

is there something i can do if i'm working with font-size at 13px instead of 14px? how can i have crisp icons at that size now?

[lukeman]

Discussion on this issue should be closed. For info and help with FontAwesome you should refer to its project site or its GitHub project page.

[mdo]

Yup, please take the rest of the discussion of external projects to their respective repos. Thanks!

[alexburner]

I've been digging around all of the different threads mentioning Font Awesome and thought this would be the best one to drop a line in (it's 8 months dusty but seems to be the most discussed & referenced).

I'm curious, why did Font Awesome never make it into Bootstrap? The new 3.0 release includes a Glyphicons font. However, Font Awesome still has a better selection and looks better at standard resolution. Here's an example:

On the left is the Glyphicons star, and on the right is Font Awesome's star. The Font Awesome one is rendered better at normal resolution (via FF23 on Windows 7).

Is this a licensing issue? A technical issue? A personal preference?

EDIT: "rendered better" is a vague statement. What I'm specifically noticing is that Glyphicon's star has jagged arms. While Font Awesome's might be considered a little fuzzy, I think blurry beats chunky.

[adamjgrant]

Define "better"? They look like they're just two different styles.

The designs for the Glyphicons themself preceded those of FA. Although FA icons were created from scratch, they did just directly mirror the appearance of the Glyphicons.
Originally it was just to make the library into an icon font. Now the Glyphicons are an icon font and FA serves to provide more icons.

I'll let the authors of Bootstrap defend this if they are available, but in my
view, "as much as possible" is not the vision of Bootstrap. That's why it's
called "Bootstrap."

Insofar as icons are concerned, creating "needed" icons is a never-ending
rabbit hole. Noun project anyone? http://thenounproject.com/

It makes sense to me that the number of icons provided by Glyphicons is
what it is because these are very common, generalized icons for
applications.

EDIT: On further inspection, it does look like FA renders better at 14px^2. I concede to that point, but I would still argue the Glyphicons should be improved, not replaced with FA.

EDITED again clarifying my earlier usage of "rip off"

[alexburner]

@ajkochanowicz look at the bottom of my post for "better" definition. Glyphicons are rendering jagged on my machine. Font Awesome icons come out smoother at regular resolution (14px). Check out http://tagliala.github.io/vectoriconsroundup/ for more examples of render differences.

Font Awesome seems like the most effective solution for font-based icons. I'm just wondering if there was any consideration for bringing it onboard and/or why it was rejected.

[alexburner]

@ajkochanowicz oops now I see your edit too lol. I'm still wondering, why work to fix up Glyphicons when there is already an existing solution?

[puzrin]

@ajkochanowicz 2 clarifications: I don't think, that FA can be mentioned in context of "rip off". it's 3.0 version has independent artwork, and well fitted to 14px grid (that's base font size for bootstrap 3.0).

Technically, right now, FA is better, because of exact grid fitting. I think, that's honest criteria.

However, developpers can have own reasons to keep glyphicons in bootstrap. Anyway, this area is well isolated and customizeable. Tons of thanks to BS authors for moving web forward.

[adamjgrant]

@puzrin My comment was that they ripped off the glyphicons (past tense). They had the exact same ones in the exact same style with the exact same class names, by design. I understand the purpose of this but that's what it is. That they have a new version with more artwork is great--that's why I include it in my product, Kickstrap. But how does that annul it having been a rip off from the start?

If I rip off someone's car and add fuzzy dice to the mirror, it does not mean that I did not rip off the car.

[davegandy]

@puzrin @ajkochanowicz Actually, every icon starting in Font Awesome 1.0 was designed from the ground up. Many of the conventions for the icons were similar to Glyphicons, but many of theirs were also similar to those that came before.

And yes, thanks to the Bootstrap authors for making the web a bit better.

[adamjgrant]

"Why work to fix up Glyphicons when there is already an existing solution?" For the reasons I mentioned. It's not a solution.

"'as much as possible'" is not the vision of Bootstrap. That's why it's called "Bootstrap. Insofar as icons are concerned, creating "needed" icons is a never-ending rabbit hole..."

[adamjgrant]

@puzrin @davegandy This is the second time someone has mentioned that FA icons were done (labored) from scratch which leads me to believe my words "rip off" are being misunderstood. I understand that you (Dave) did not literally make a digital copy of them, but their designs are a direct copy of them, even if being started from scratch.

I understand why it was done this way, and there was a real need for it at the time (Glyphicons weren't an icon font yet) that's why I tout it as one of the big features of my own project.

EDIT: (I've removed "rip-off" from my original post and clarified instead)

[davegandy]

Subsetting a font is relatively trivial. A subset of Font Awesome would have been pretty easy. I'd also have been happy to address any concerns with including Font Awesome (file size, number of icons, any CSS issues, etc).

[adamjgrant]

@davegandy A subset sounds more reasonable. What would you call it?

"but many of theirs [Glyphicons] were also similar to those that came before" Valid point.

[alexburner]

@ajkochanowicz I don't consider "too many icons" a reason to build a new solution instead of use an existing one, especially when all those icons are actually useful (go through the pile, FA has a lot but it's not some sort of Noun Project ridiculous hodge podge... it's just @davegandy making a great set of icons).

Besides, Bootstrap 3.0 Glyphicons set currently includes such essential gems as 7.1 surround sound and the Dolby Digital icon. As well as both deciduous and conifer trees. I don't think a stripped-down icon set is the primary motivation here.

[adamjgrant]

@alexburner Hmmm. Your argument is making more sense now.

[davegandy]

It was also hugely kind of Glyphicons to let their sprites be used for free in Bootstrap 2. Keeping it in makes a good bit of sense to me personally. @mdo is a good guy like that. :)

@ajkochanowicz Font Awesome Core might be a decent name for a subset. The most common and important icons in a single set.

[davegandy]

It's a good idea for Font Awesome to include a core set. And I'll stop hijacking this thread. :)

[adamjgrant]

I'm concerned about the lack of lycophytic and dioecious trees in the current icon set. Why limit it to just conifers and deciduous trees? I guess it's okay that it doesn't have epiphytes as well. Shouldn't we be talking about that?

[adamjgrant]

"And I'll stop hijacking this thread. :)" Me too.

[alexburner]

Thanks @davegandy, kindness is the best reason for Glyphicons I've heard so far. As long as FA is still magic-easy to drop in I suppose I shouldn't raise too much stink.

Haha @ajkochanowicz you're right, we should start a new issue to get proper arboreal representation in the next Bootstrap release! Lord only knows how we've survived this long without them.