font-variant other than normal

[ccarns]

Discovered a bug/issue that only raises its head on Chrome. If your icon is wrapped inside of style where the font-variant is small-caps (probably others options break as well) the intended icon will do the famous box icon OR some other unwanted icon.

FIX:

    [class^="icon-"], [class*=" icon-"] {
      font-variant: normal !important;
    }

Hope this saves someone else the 2 hours me and my co-worker spent in the weeds tracking down the cause.

PS we are still confused but I could not repo it on my box and he could - even though we had the exact same Chrome version AND the exact same hardware and OS.

[tagliala]

Unable to reproduce: http://jsfiddle.net/tagliala/pzELF/

Could it be related to #862 and optimizeLegibility?

[ccarns]

@tagliala I was UNABLE to repo as well on your jsfiddle- but had my collegue hit that and it DID repo on both instances (span and h4)

I CAN repo in moblie Chrome (android) v 30.0.1599.82 both instances

[tagliala]

Confirmed on chrome mobile beta for android.

I will send a mail to dave, don't know if this should be documented or included in the base class of 4.0

[ccarns]

@tagliala OK thanks just wanted to enhance a great product!

PS Can you come up with an instance of when my fix might cause unwanted results. I cant think of any since the whole point of this font is to display icons/glyphs - a font variant should never come into play in my mind.

[tagliala]

I'm confident that neither your fix nor the other one will affect FA's functionalities, but fixing #2131 , #862 and this one in the base class adds 3 extra rules that are only needed in some edge circumstances.

I will talk point this out to Dave and Rob, then it will be their call

[tagliala]

Able to reproduce with glyphicons on my desktop (chrome 30, w7 x64)...

http://jsfiddle.net/tagliala/vx6mr/1/

I'm going to submit a bug to chromium

[tagliala]

@ccarns can you please try out Chrome Canary 32.0.1674.2 ?

[tagliala]

It's fine in chromium 32, closing here!

It's also documented in https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

[tagliala]

This is solved in 4.2.0

---

Removing the following from the troubleshooting guide:

font-variant (Small caps)

If you are using font-variant: small-caps;, according to your Font Awesome version, please add to your stylesheets:

/* FA 4.0.0 and newer */
.fa {
  font-variant: normal;
}

/* FA 3.2.1 and older */
[class^="icon-"],
[class*=" icon-"] {
  font-variant: normal;
}

(more info on #2171)