Apply all the specific CSS on the pseudo-element (:before)

[mr21]

Hi :)

In this page I use the true FontAwesome 4.3.0.
http://mr21.github.io/_/fa/test-pseudo-elements/before.html
There are two columns, on the left I've pasted all your examples I found at:
http://fontawesome.io/examples/

And on the right I change each example.
For example, I changed this :
<i class="fa fa-camera-retro"></i> fa-camera-retro<br/> by this:
<i class="fa fa-camera-retro"> fa-camera-retro</i><br/>

And this :
<li><i class="fa-li fa fa-check-square"></i>List icons</li> by this:
<li class="fa-li fa fa-check-square">List icons</li>

We can see, none works really good on the right.
At the same time this is not how we should use FontAwesome, I understood.

But why not allow the two notations.
Many times we have to create another DOM element for... nothing.
Actually, something like this:
Click here: <a href="#" class="fa fa-link"></a> will works and it's prettier than:
Click here: <a href="#"><i class="fa fa-link"></i></a>

But this rules not works for the all case.

My change doesn't break anything, it just allows another notation for saving a few DOM elements sometimes. You can check here:
http://mr21.github.io/_/fa/test-pseudo-elements/after.html.

I add a :before behind every CSS rules except after: .fa-ul { ... } and .fa-ul > li { ... }

PS: I firstly pushed only the css/font-awesome.css.

[tagliala]

At the same time this is not how we should use FontAwesome, I understood.

IMHO If you have special needs, you should customize your own build

There should be issues related to before pseudoelements: #5082 (comment)

Refers to #2695 #1729

[leoyli]

I also don't get it why FA have to be limited in <i> tag...