search

FortAwesome / Font-Awesome

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

Bootstrap 3.0 #940

Closed philfreo closed 11 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.

tlindig commented 11 years ago

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

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

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

cmfcmf commented 11 years ago

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

faicon here

tlindig commented 11 years ago

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

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

faicon because it's shorter.

tlindig commented 11 years ago

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

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

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

colinmegill commented 11 years ago

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

davegandy commented 11 years ago

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

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

.faicon .faicon-* because:

davegandy commented 11 years ago

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

Awesome

On Mon, Oct 7, 2013 at 7:37 AM, Dave Gandy notifications@github.com 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/FortAwesome/Font-Awesome/issues/940#issuecomment-25813372 .

davegandy commented 11 years ago

This is checked into 4.0.0-wip branch.

davegandy commented 11 years ago

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.