Closed philfreo closed 10 years ago
I thought bootstrap were moving to font-awesome in 3.0...
Nope
"Bootstrap [3.0] comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement."
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."
Yep that's what I've been saying. They are moving to font icons, but not Font Awesome. Hence this question.
oh i see, i should have read your original post clearer :-)
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...
Anyone managed to get these working together yet?
@niallobrien wp 3.0 + fontawesome 3.0.2?
@tagliala Yeah, if so - any tips?
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
@tagliala Thanks, I'd to fiddle with the path for how I've my pipeline setup, but all's good now! Thanks!
you're welcome
I think we'll tackle this once Bootstrap 3.0 is released. Should clean this project up a good bit, too.
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.
@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
?
@tagliala suggestion +1 prefer faicon faicon-icon_name
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.
+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
)
@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?
@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
...
@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) :)
@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.
+1
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?
@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.
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...!!!
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?) :)
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..
http://tagliala.github.io/vectoriconsroundup/
28 new icons 8 name mismatchs
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.
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
Glyphicons were here before Font Awesome: it's not a new way of making money, it's an old one :)
Guys I need your help here: https://github.com/FortAwesome/Font-Awesome/issues/568#issuecomment-23081905
Please also read the whole thread
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-...".
@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..
@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.
@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..
@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?
@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-..."?
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
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.
With Bootstrap 3 and the product name in the icon classes, FA has a problem to solve.
Pro:
Contra:
Pro:
Contra:
Pro:
Contra:
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:
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.
@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?
730 , #1905 are caused by
icon-*
- With a different syntax, we can get rid of the whole bootstrap.less file.
- BS 2.* uses
[class*=" icon-"]
, so those selectors will be fired on eachicon 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
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?
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.
- 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?
- 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.
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
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?
People should get over it and have to realise that stuff will break eventually if you want to upgrade to something new!
<i class="icon...
and do something about it...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
...
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
...At this point I'm seriously thinking about fontawesome fontawesome-*
...
fontawesome fontawesome-chevron-sign-up
... an embedded svg could be smaller :)
@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
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.