search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.47k stars 12.19k forks source link

Bootstrap 3.0 #940

Closed philfreo closed 10 years ago

philfreo commented 11 years ago

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 commented 11 years ago

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

philfreo commented 11 years ago

Nope

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

muzzamo commented 11 years ago

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 commented 11 years ago

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

muzzamo commented 11 years ago

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

tagliala commented 11 years ago

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 commented 11 years ago

Anyone managed to get these working together yet?

tagliala commented 11 years ago

@niallobrien wp 3.0 + fontawesome 3.0.2?

niallobrien commented 11 years ago

@tagliala Yeah, if so - any tips?

tagliala commented 11 years ago

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)...

nuovo-2

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 commented 11 years ago

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

tagliala commented 11 years ago

you're welcome

davegandy commented 11 years ago

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

davegandy commented 11 years ago

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 commented 11 years ago

@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-)

css

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

zzjin commented 11 years ago

@tagliala suggestion +1 prefer faicon faicon-icon_name

davegandy commented 11 years ago

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 commented 11 years ago

+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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

@tagliala My email is dave@davegandy.com 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 commented 11 years ago

@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 commented 11 years ago

+1

lipis commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

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...!!!

tagliala commented 11 years ago

https://github.com/twbs/bootstrap/pull/9767

glyphicons are coming back. There seems to be new icons too. I'm going to update my comparison tool

I'm even more sure that we need to wait for the final release of BS 3.0. New features were introduced between RC1 and RC2. New features are being introduced in RC3 (maybe final?) :)

lipis commented 11 years ago

You don't have to wait.. you can start working on a working branch.. regarding the new naming conventions and stuff.. the icons will eventually come.. but the whole thing should already be in the works!! It's not hard to keep up.. there are not going to be many changes from the icons point of view..

tagliala commented 11 years ago

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

28 new icons 8 name mismatchs

alexburner commented 11 years ago

I'm wondering if there's any info on future Font Awesome integration with Bootstrap, or any reasons that FA wasn't already pulled into the BS project. The new Glyphicons font is neat but still doesn't compete.

I also commented over at https://github.com/twbs/bootstrap/issues/966#issuecomment-22963300

Not really sure where to put this.

Martin-Andersen commented 11 years ago

Font Awesome have 361 icons and glyphicons has only 180, but you can buy the pro pack for 59$ and get what U get for free with FA. Is this a new way to earn money? I just upgraded to version 3.0 and there is a lot of icons missing, bad

tagliala commented 11 years ago

Glyphicons were here before Font Awesome: it's not a new way of making money, it's an old one :)

tagliala commented 11 years ago

Guys I need your help here: https://github.com/FortAwesome/Font-Awesome/issues/568#issuecomment-23081905

Please also read the whole thread

tlindig commented 10 years ago

Please do not go the way of boostrap 3 and take a product name, where only a semantic name was needed! There is no technical reason for that.

To solve the performance problem and the base + modifier class approach, the only needed change was:

add a class "icon".

The usage than would be:

<i class="icon icon-search"></i>

I strongly recommend this as the default way.

To get font awesome work with bootstrap 3 we need no class ".fontawesome" or ".fa-" or some think like this. The only thing we need is a less or css file, that overwrite ".glyphicon" with values of our new class ".icon" and ".glyphicon-..." with values of "icon-...".

lipis commented 10 years ago

@tlindig Nope.. you have to play nice with others.. FA is not the only icon font online.. the reason BS went with the provider prefix was exactly that.. that you can easily plugin whatever you want without overrides..

tlindig commented 10 years ago

@lipis For easy switch, between different Icon-Fonts I need this common name. I want the overrides. If I want plugin different icon-fonts at same time, I still can add a separate class and use this as pseudo namespace.

<div class="fontsetA">
    <i class="icon icon-search"></i>
</div>

or 

<i class="fontsetB icon icon-search"></i>

or in future, use the scoped attribute at style element.

lipis commented 10 years ago

@tlindig sure.. let's have 5 wrapper classes for each icon.. that's sounds like a good idea.. instead of search and replace across the whole project.. wrapper class is not a valid argument..

tlindig commented 10 years ago

@lipis so you say this:

<i class="glyphicon glyphicon-search"></i>
<i class="iconset_a iconset_a-search"></i>
<i class="iconset_b iconset_b-search"></i>

is much better than this?

<i class="icon icon-search"></i>
<i class="iconset_a icon icon-search"></i>
<i class="iconset_b icon icon-search"></i>

Sorry, I can not see benefit.

If you use search and replace across the whole project for 5 iconset, how you will figure out, which one of the 5 iconset names shall replace the matched "glyphicon" string?

tlindig commented 10 years ago

@lipis To be sure we do not talk past one another I try to clarify the three cases.

Case 1: Replace the bootstrap default iconset with own one

Case 2: using multiple iconsets at same time within your bootstrap markup, which use same class names and where you got name conflicts/overrides.

Case 3: using bootstrap at one page together with no bootstrap markup that use same class names.

For case 1): With common names, like "icon" and "icon-..." it is very easy like it was in bootstrap 2.x. I only need to add a "css" or "less" file, that overrides the css rules. Now, in bootstrap 3, I shall add a "css" or "less" and search and replace across the whole project to replace "glyphicon" and "glyphicon-" with iconset specific name.

In this case, the product specific prefix "glyphicon" has no benefit. Quite to the contrary, it leads to more work.

For case 2): In bootstrap 3 you have minimum the same effort to get it run, than you had in bootstrap 2. You have to find a way, to prevent overwriting. May be with iconset specific class names or with pseudo namespacing or what ever.

In this case, the product specific prefix "glyphicon" has no benefit.

For case 3): If the no bootstrap markup use the same class names like bootstrap 2, you have a benefits in bootstrap 3, but only for icons. All other classes still get conflicts, like "container", "row" or "table". That are not prefixed. So you have to find a way, to prevent overwriting. May be with iconset specific class names or with pseudo namespacing or what ever. Same as it was with bootstrap 2.

@lipis Again, what is the technical reason for using product name "glyphicon" and "glyphicon-..." as default icon classes instead of common class names like "icon" and "icon-..." or may be "bs_icon" and "bs_icon-..."?

tagliala commented 10 years ago

I partially agree with @lipis.

If FA is a font icon set for bootstrap, then it should work out of the box by simply replacing the link to the font file.

I would avoid icon-* because it needs universal selectors to override old bootstrap stuff and this will cause bugs, e.g.: #730 , #1905. It will break backward compatibility, but it's ok with a major

tlindig commented 10 years ago

tagliala said:

I partially agree with @lipis.

@tagliala: In which part?

lipis said:

.. the reason BS went with the provider prefix was exactly that.. that you can easily plugin whatever you want without overrides..

Without overrides, you have to search and replace. For me, that is not out of the box.

but I said:

The only thing we need is a less or css file, that overwrite ".glyphicon" with values of our new class ".icon" and ".glyphicon-..." with values of "icon-...".

tagliala said:

I would avoid icon-* because it needs universal selectors to override old bootstrap stuff and this will cause bugs, e.g.: #730 , #1905. It will break backward compatibility, but it's ok with a major

If you want override old bootstrap stuff (bootstrap 2.x), you needs universal selectors in any case, isn't it? That is because they used universal selectors instead of a base class, like "icon". It dose not matter if you call the FA icon prefix "icon-" or "faicon-" or what ever.

Only for bootstrap 3 you can dispense with the universal selector "icon-*", because they themselves do not use a universal selector. It dose not matter if you call the FA icon prefix "icon-" or "faicon-" or what ever.

tlindig commented 10 years ago

With Bootstrap 3 and the product name in the icon classes, FA has a problem to solve.

How FA will prefix his icons?

Way a) use a FA specific prefix, like "faicon-".

Pro:

Contra:

Way b) use the same prefix like bs3, take "glyphicon-".

Pro:

Contra:

Way c) do not change, use "icon-" as prefix and "icon" as base class

Pro:

Contra:

Way d) fork bootstrap 3 and use "icon" instead of "glyphicon"

All this problems we only have, because bootstrap 3 use a product name as prefix in icon classes. So "Fight the evil at the root".

Pro:

Contra:

conclusion

There seams to be not a optimal solution.

IMHO way b brings confusion, way a has more disadvantage than way c. Way d is unsafe because the success is not clear.

So way c would be the best.

tagliala commented 10 years ago

@tlindig

@tagliala: In which part?

Oh my bad! I agree with you @tlindig :)

...except for the icon-* and keeping backward compatibility

name conflict with prefix "icon-"? But is this really a problem?

  1. 730 , #1905 are caused by icon-*

  2. With a different syntax, we can get rid of the whole bootstrap.less file.
  3. BS 2.* uses [class*=" icon-"], so those selectors will be fired on each icon icon-name and we need to override stuff and keep hacking BS 2. We could use a separate stylesheet for BS 2.0 users (is an extra http request fine for "legacy" support?)

break backward compatibility to FA 3, users have to learn new icon names.

Again, this is fine with a major release. Upgrading BS 2.0 to 3.0 is way more painful. A global replace will probably do the job except for edge cases

I also like the B approach because FA is "The iconic font designed for Bootstrap". Moreover, I don't think they can claim copyrights on a css class name but we should ask. New icons will use the glyphicon-* syntax.

I suppose that by default FA 4.0.0 will not work out of the box (because of the design choice of BS): it should be a pro of B approach instead of a con of A, C and D.

Sorry for my English

tlindig commented 10 years ago

Sorry for my English too, I still try to find with a dictionary the right word.

@tagliala

name conflict with prefix "icon-"? But is this really a problem?

  1. 730 , #1905 are caused by icon-*

This Bugs are force of using the universal selectors in css by BS2. This is not a problem of BS3. I do not see, how an AF 4 with different icon prefix will solve this problem. If you take a markup written for BS2, you always have the "icon-" prefix. To overwrite the icon classes in BS2 you still need the universal selectors.

  1. With a different syntax, we can get rid of the whole bootstrap.less file.

This is only for BS2, not for BS3. BS3 do not have the universal selector for icons. see answer for 1.)

With different syntax (class names), you are not able to work out of the box by simply replacing the link to the font file / icon css. You have to search and replace the markup. Is this what you want?

  1. BS 2.* uses [class*=" icon-"], so those selectors will be fired on each icon icon-name and we need to override stuff and keep hacking BS 2. We could use a separate stylesheet for BS 2.0 users (is an extra http request fine for "legacy" support?)

I totally agree.

I also like the B approach because FA is "The iconic font designed for Bootstrap". Moreover, I don't think they can claim copyrights on a css class name but we should ask. New icons will use the glyphicon-* syntax.

That is a bitter pill. Give all icons inside the Awesome Font the prefix of glyphicons. This makes the choice of BS3 for icon prefix name completely absurd.

I do not like any of the approach, but I would prefer C. I still have the hope, that the bootstrap makers have some understanding that their prefix choice makes a lot of unnecessary trouble.

If not, AF4 could hold a "mapping" file, that overwrites all "glyphicon-..." classes or go the ugly way B.

tagliala commented 10 years ago

I do not see, how an AF 4 with different icon prefix will solve this problem

different prefix => icon-* selector will not be triggered on BS 2 => no bugs in BS 2 and BS 3 related to wrong overriding

Example: BS2 + FA = http://jsfiddle.net/5EHaL/ (check this one with firefox) BS3 + FA = http://jsfiddle.net/cKNhp/

Caused by the icon-* stuff, both in BS2 and BS3

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

tlindig commented 10 years ago

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:

or something of that kind.

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

lipis commented 10 years ago

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

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 commented 10 years ago

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 commented 10 years ago

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

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

lipis commented 10 years ago

@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 https://github.com/twbs/bootstrap/issues/10201#issuecomment-23304007