Restore font-family to :before selector.

[VonC]

When Font-Awesome is used with other third-party css framework,
like https://github.com/hakimel/reveal.js, said css framework
can define (wrongly or rightly) global rule like
https://github.com/hakimel/reveal.js/blob/master/css/reveal.css#L16
that end up overriding font-awesome.css rules.

And that, even if font-awesome.css is declared after all other css.

Restoring that font-family in the :before selector ensure that rule
is present in the final css rules applied to an html element.

Similar to #1716

[tagliala]

I'm really against this one, people using that framework should fix by themselves.

I have to close this one because pull requests should have be done against w.i.p branches.

With the new 4.0.0 syntax, the fix should be

.reveal .fa-icon {
  font-family: 'FontAwesome';
}

@davegandy @robmadole thoughts ?

PS: CSS is automatically generated from LESS (that is automatically generated by jekyll 😆). In other words, source files are in https://github.com/FortAwesome/Font-Awesome/blob/4.0.0-wip/src/assets/font-awesome/less/ and their SCSS counterpart.

[VonC]

@tagliala I have no problem with this pull-request being closed.

It was more a candid feedback than anything else:

I am using Font-Awesome with reveal.js; it doesn't work.
I restore font-family in the :before selector, it works".

I will now have a closer look at reveal.js use of font-family:inherited for html and body in reveal.js css 😉

[tagliala]

the problem is that .reveal * stuff has priority over *[class^=icon-]
E.g: http://jsfiddle.net/tagliala/Ea4fB/1/

To fix the current version add to your stylesheets:

.reveal [class^="icon-"],
.reveal [class*=" icon-"] {
  font-family: 'FontAwesome';
}

E.g: http://jsfiddle.net/tagliala/Ea4fB/2

[VonC]

@tagliala Thank you very much. It seems to work fine, both with fa 3.2.1 and wip-4.0.0:

I included:

    <style type="text/css">
      .reveal [class^="fa-icon-"],
      .reveal [class*=" fa-icon-"],
      .reveal [class^="icon-"],
      .reveal [class*=" icon-"]  {
        font-family: 'FontAwesome';
      }

And try (with FA 4.0.0) a:

<i class="fa-icon-twitter"></i>Test

It works well, without having to modify anything in hakimel/reveal.js

That kind of setting would be interesting to know when reading the "Not using Bootstrap?" of the Get Started page

[tagliala]

@VonC you're welcome

btw in fa 4.0.0 the proper usage is fa-icon fa-icon-icon, it should not work otherwise because all basic styles are applied to fa-icon class...

[tagliala]

@VonC

I read better your css. It's "wrong", please fix with:

.reveal .fa-icon,
.reveal [class^="icon-"],
.reveal [class*=" icon-"]  {
  font-family: 'FontAwesome';
}

Then add fa-icon before all your icons
This is for performance reasons about the universal selector.

[VonC]

@tagliala Ok, I have fixed my fa-icon css and usage: it does work fine 😄

Again, it will be useful to read about that kind of setting in the Get Started page, both for 3.2.x and the upcoming 4.0.0.