Bootstrap 3.0

[philfreo]

What are your plans (+ timeline, if you have one) for dealing with Bootstrap 3.0?
They're bundling a glyphicons font (160 icons) where the syntax for icons differs.

[muzzamo]

I thought bootstrap were moving to font-awesome in 3.0...

[philfreo]

Nope

"Bootstrap [3.0] comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement."

[muzzamo]

http://untame.net/2013/01/twitter-bootstrap-3-0-icon-fonts-incoming/

"So now you know why icon fonts are awesome, but wondering why they apply to your bootstrap craving needs? Well I have great news! In the upcoming 3.0 release of Twitter Bootstrap, the glyphicon will be fully rendered in their font form! That means that with only a few lines of code, you will be able to jump in and change icon colors, sizes and more using the same bootstrap techniques that we have all come to enjoy."

[philfreo]

Yep that's what I've been saying. They are moving to font icons, but not Font Awesome. Hence this question.

[muzzamo]

oh i see, i should have read your original post clearer :-)

[tagliala]

Here it is a comparison between FA3 and glyphicons in BS 3.0:

http://tagliala.github.io/vectoriconsroundup/

I don't know why they opted for glyphicons... they are not even pixel perfect at 14px...

[niallobrien]

Anyone managed to get these working together yet?

[tagliala]

@niallobrien wp 3.0 + fontawesome 3.0.2?

[niallobrien]

@tagliala Yeah, if so - any tips?

[tagliala]

No issues for me, but I'm not using BS 3.0 in production.

Just replaced the glyphicons.less with (a slightly modified) font-awesome.less and recompiled bootstrap (npm install, make bootstrap)...

https://github.com/tagliala/bootstrap/tree/3.0.0-fa-wip

If you need precompiled assets:

https://github.com/tagliala/bootstrap/tree/3.0.0-fa-wip-assets/bootstrap

PS: I didn't include fontawesome-ie7.css file 'cause BS 3.0 dropped support for ie7

[niallobrien]

@tagliala Thanks, I'd to fiddle with the path for how I've my pipeline setup, but all's good now! Thanks!

[tagliala]

you're welcome

[davegandy]

I think we'll tackle this once Bootstrap 3.0 is released. Should clean this project up a good bit, too.

[davegandy]

Lots of progress on this tonight. Only have sort arrows left to get to Bootstrap 3.0 icon parity. Also added 7 total new currency symbols instead of just the 3 that BS3 has.

[tagliala]

@davegandy how about the syntax?

BS3.0 is using glyphicon glyphicon-icon_name

The first glyphicon should be related to performance (it should be way faster than [class^=icon-] and [class*= icon-)

We should expect fontawesome fontawesome-icon_name ? faicon faicon-icon_name?

[zzjin]

@tagliala suggestion +1 prefer faicon faicon-icon_name

[davegandy]

For 3.2, I'm not planning on breaking backward compatibility. For 4.0, there will be a complete renaming of all icons across the board, including how the icons are referenced. I'm leaning toward something like "fa fa-iconname" for terseness.

That performance difference is quite motivating, however. I'll consider jumping ahead straight to 4.0 instead of going through 3.2.

[tagliala]

+1 for 4.0

PS: remember to take a look here http://tagliala.github.io/vectoriconsroundup/

There are a couple of icons that needs to be renamed or aliased (check-empty -> unchecked, paper-clip -> paperclip), others that are missing (currencies, collapse-up, etc.) and a couple of inconistencies with fillings (someone already reported envelope and envelope-alt)

[davegandy]

@tagliala Oh, I've been using that page as a reference. It's VERY helpful for tackling this issue. Thank you SO much for keeping that up to date. Most of what you've noted there has already been checked into the 3.2.0-wip branch.

Any interest in being a core contributor and helping out more officially?

[tagliala]

@davegandy I'm interested, I sent you a pm on twitter

I'm writing here too because I just noticed another mismatch and I had to update my page: in BS 3.0, phone is actually mobile-phone...

[davegandy]

@tagliala My email is [email protected] if you want to drop me a note. Let's chat (sorry to others who are getting this as spam. Just trying to connect) :)

[davegandy]

@tagliala Just checked in everything from your list except mobile-phone. I'm going to keep my old-school phone for now and don't want to rename it. Everything else. however, should be done from your list.

Also, all of Bootstrap 3.0s icons should now have equivalents in Font Awesome 3.2.0-wip branch.

[gruvii]

+1

[lipis]

So since the RC1 is out and soon there will be RC2 (https://twitter.com/twbootstrap/status/364453706546167809) what's the official approach to that?

As I can see the 4.0.0-wip still using the old naming (icon-iconame) and there are still CamelCasa variables for the FontAwesomePath so I'm guessing nothing was done for the BS3 support... and this issue is closed for some reason.!

Are you going to create a new branch to address the new changes? Shall we open a new issue for that?

[tagliala]

@lipis Yes, at the moment 4.0.0-wip does not deal with Bootstrap 3.0's new syntax

This thread closed because all new Glyphicons were introduced.
FA 3.2.0 is ready to work with BS 3.0 (I can confirm and I'm using them in navbar, links, buttons, lists...)

The only issue I found at the moment is the following: #1708

I will not reopen now, I will wait for @davegandy 's instructions.

I will suggest to start making syntax changes in the 4.0.0-wip branch, wait for BS 3.0's final release and then tweak last things.

[lipis]

I'm using the 3.2.0 in BS3 without issues but I wanted to start using the new naming convention that BS introduced.. all I'm saying that it could be already somewhere since rc1 is there.. before the final, as I want to be ready with the official support of FA when BS final is out.. even if it's buggy :)

So +1 for starting making syntax changes in 4.0.0-wip branch...!!!

[tlindig]

We can go for icon icon-* and release bootstrap2.css separately

Wonderful.

On this way we would also consider, that some people use Font Awesome simply as icon set without bootstrap.

So Font Awesome 4 could support 3 targets with 3 css files:

• fontawesome.css - for bootstrap 2 (with the slow universal selectors .icon-* )
• fontawesome-icons.css - as simple font based icon set (with class .icon and .icon-)
• fontawesome-bs3.css - for bootstrap 3 (with overwrites for .glyphicon and .glyphicon-)

or something of that kind.

@davegandy What you think about this? What are your preferences target for first class support in Font Awesome?

[lipis]

People should get over it and have to realise that stuff will break eventually if you want to upgrade to something new!

• For bs2 leave the old version if necessary or use the new one for whatever is going to be.. don't spend too much time on it.. Is very easy to search in the whole project for: <i class="icon... and do something about it..
• .icon is too generic and since bs is affecting a lot of people I think others will adopt the new convention which is not bad and there are no conflicts with that approach!
• Overriding the .glyphicon- would be the worst idea ever... why would anyone put their own work under someone elses brand?!

In short don't think about it too much.. it started as a replacement for BS and since they changed some conventions why not following that..?! Easy and simple... no reason for overrides.. no reasons for the slowest version.. no reason to taking over the general .icon.. i have to admit that .fontawesome is long but it could be just awesome or faicon or just fa...

[tagliala]

People should get over it and have to realise that stuff will break eventually if you want to upgrade to something new!

Agree. And we are talking about developers, not people. :)

.icon is too generic and since bs is affecting a lot of people I think others will adopt the new convention which is not bad and there are no conflicts with that approach!

Right. It may break someone's css. Didn't think about that before.

Overriding the .glyphicon- would be the worst idea ever... why would anyone put their own work under someone elses brand?!

I'm not against this one, it will work out of the box, it's an important pro

or just fa...

same risk of icon, it's too generic and it's a bad name

Dave has a lot to read and think about.

I can start a new thread collecting all pros and cons for each approach, extending @tlindig 's post

BTW the correct thread about new syntax is #568

[tagliala]

...At this point I'm seriously thinking about fontawesome fontawesome-*...

fontawesome fontawesome-chevron-sign-up... an embedded svg could be smaller :)

[lipis]

@tagliala Why it should work out of the box I don't get it..!! I wouldn't like to sign my work with somebody elses signature.. developers tend to view-source to check the source and seeing a glyphicon will be totally misleading and I'm pretty sure it's against some privacy issues to do that!

Like you said we are developers and search and replace works nicely these days.. upgrade to a better editor if it doesn't work in notepad :)

that is going to be my last comment on this thread.. read also mdo's answer on this matter
twbs/bootstrap#10201 (comment)

[tlindig]

lipis said:

Why it should work out of the box I don't get it..!!

To have a easy way to make a project or webapp themeable, also in the icon style.

[davegandy]

I've tentatively decided to go with fa fa-* after quite a bit of thought. I will not be using glyphicons glyphicons-*, as this font is not glyphicons.

Other options: faicon faicon-* or fontawesome fontawesome-*. This is definitely still up for discussion, however. What do people think?

[lipis]

I think fa is too small and might be confusing... my vote is for faicon

[cmfcmf]

fontawesome is definitely too long, I think. fa is really short, but not necessarily unique and as @lipis said, could be confusing. So faicon seems to be a unique, still short, understandable way of naming.

[tagliala]

faicon here

[tlindig]

My favorite is icon icon-*.
To be able to solve name conflicts, also support pseudo css namespacing with fontawsome icon icon-*. I still think that this would be the most flexible and easiest to maintain solution. Also in the point to support backward compatibility.

If that is not a option for you, I would prefer faicon faicon-*. Same arguments like @cmfcmf and @lipis

[davegandy]

Sadly, we can't do icon icon-*. One of my requriements for this is that Font Awesome be able to sit alongside another icon font on the same page. faicon faicon-* seems like a find compromise, and includes some context that this thing is an icon. Another option along this line would then be fa-icon fa-icon-* to drive home that this really is an icon. Opinions?

[cmfcmf]

faicon because it's shorter.

[tlindig]

fa-icon fa-icon- has a better visual separation and so may be icon modifier could be written shorter, like fa-rotate-90, fa-size-2x, fa-spin and so on.

But faicon faicon-* is also fine.

by the way

@davegandy said:

One of my requirements for this is that Font Awesome be able to sit alongside another icon font on the same page.

IMHO, If icon sets follow the convention, support regular icon class and support pseudo name-spacing with extra class, you could have both, easy switch of icon set without manipulation the markup if you use one set at whole page or be able to use multiple icon sets in one page.

example for usage with one set on page:

<i class="icon icon-search">
<i class="icon icon-zoom-in">
<i class="icon icon-zoom-out">

example if multi set at one page is required:

<i class="set1 icon icon-search">
<i class="set2 icon icon-zoom-in">
<i class="set3 icon icon-zoom-out">

the only thing, what icon sets have to do: define every rule twice, with name-space and without. The lesscss file could look like this:

icon,
.set1.icon {
    // ...
    &.icon-search:before { content: @search; }
    &.icon-zoom-in:before { content: @zoom-in; }
    &.icon-zoom-out:before { content: @zoom-out; }
    // ...
}

But that is only my view. I have the strong feeling, that I am wrong, because no body wants agree with me. There must be an important fact I fail to see.

[tagliala]

fa-icon fa-icon- has a better visual separation and so may be icon modifier could be written shorter, like fa-rotate-90, fa-size-2x, fa-spin and so on.

But faicon faicon-* is also fine.

by the way

Agree. Moreover, in this way we can have, e.g., an icon named stack and an icon named 2x (for 2x speed)

[lipis]

faicon is better than fa-icon to have less dashes.. :)

[colinmegill]

fa-icon is going to be clearer in the long run.

[davegandy]

@tlindig The problem with multiple selectors is the rendering speed. @tagliala did an investigation and found quite a difference. fa.fa-* renders much slower than fa and fa-* specified separately. Otherwise, my top preference would be fontawesome icon-*.

It just renders too slow.

[robmadole]

I have followed this loosely as Dave has pinged me now and again. I was firmly in the faicon faicon-* camp until just now.

After I saw fa-icon fa-icon-* I'm sold on that.

1. I think it's easier to read
2. It provides for classes like fa-resize-2x without a new naming pattern
3. Hyphen-separated classes is an established pattern in BS3 (col-md-1, form-control-static)
4. I actually think it's easier to type (less likely to transpose the "a" and "i", and "faicon" was continually auto-corrected to "falcon" as I was typing this)

I think @davegandy should exercise is benevolent dictator card here and make the call. Otherwise there is no end to this thread.

[lipis]

.faicon .faicon-* because:

• It's shorter than .fa-icon
• Easier to find the actual icon name when you have hyphen-separated the provider from the icon name
• Easier to select the provider than .fa-icon by double clicking
• Everything that comes with the Font Awesome stuff has the same prefix: .faicon-*, .faicon-resize-2x, .faicon-rotate-90, etc
• @robmadole when writing code I think there shouldn't be an auto correction enabled.. especially inside class names, so auto correction is not an argument
• There is no hyphen in the .glyphicon and as far as I know nobody complains

[davegandy]

Okay, folks. I've made a decision on this one. I'm going with fa-icon fa-icon-*. The prefix will be configurable for folks who want to change it.

[colinmegill]

Awesome

On Mon, Oct 7, 2013 at 7:37 AM, Dave Gandy [email protected] wrote:

Okay, folks. I've made a decision on this one. I'm going with fa-icon
fa-icon-*. The prefix will be configurable for folks who want to change
it.

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

[davegandy]

This is checked into 4.0.0-wip branch.

[davegandy]

FYI, I've gone with just the fa fa-* naming convention, but made the entire CSS prefix configurable as a variable in the LESS and SCSS.