Suggestion: .fa-before

[Traik]

In font-awesome.css there is the following class:

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

and if someone wants to add an icon to a link for example: <a href="" class="fa fa-some-icon">link</a> then the word link has font-family: FontAwesome; and there is no way to change that other than by adding another class: .fa-before.

Therefore, I suggest adding .fa-before to the main package. It would apply font-family: FontAwesome; only to the :before pseudo-element:

.fa-before:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

New usage: <a href="" class="fa-before fa-some-icon">link</a>

[simultsop]

Nice idea in a point of view, but the reason we use < i > < / i > is to don't mess with link word font family.
But having fa-before too is a plus on my pov.

[Traik]

Usage of <i class="fa fa-pencil"></i> <a href="">link</a> is fine with me but I also like the simplicity of fa-before and the fact that it inherits font-size, line-height, color etc. from the link so usage of <a class="fa-before fa-pencil" href="">link</a> results in less HTML and CSS.

It would be great if that could make it to the main package too! I didn't notice any drawbacks so far. Only simpler HTML and less CSS.

[tagliala]

It would be great if that could make it to the main package too! I didn't notice any drawbacks so far. Only simpler HTML and less CSS.

It will cause issues with fa-spin, fa-2x and some other utility classes.

Btw it should be possible as soon as the .fa() mixin will be added back, see #2454

[Jalle19]

The idea to put font-family on the element having the fa pretty much makes this whole thing useless. If you google for "how to use Fontawesome on any element" you'll find that people are duplicating the functionality in :before because no one wants to inject <i> tags all over the place (plus in some cases it's hard to do). I don't want to maintain a custom CSS class for every icon I use just to be able to use Fontawesome, and I suppose no one else really wants to either.

I've tried to find a justification on why the whole library is designed this way (ie. that you have to use a separate tag for the icon) but I haven't been able to, thus I assume it's because no one really thought of real world use cases. Markup such as <a href="#" class="fa-icon-bla">This text looks just like a normal link</a> should be perfectly valid and there's no reason why it couldn't work that way.

[Jalle19]

Anyway, changing core.less to apply to .@{fa-css-prefix}:before instead of the element directly (plus adding a small padding-right) makes it usable, though the fact that you have to change anything labeled "core" suggests that something is seriously flawed.

[Mr0grog]

I’m running into the same issue—for me, it’s dramatically better to not have those <i> tags all over. I’m working around it in my CSS by overriding the .fa class to do what it does on .fa:before instead. I’m not sure if, general-purpose-wise, that’s a workable solution, but it seems like the best way to me. It would be great to have FontAwesome work that way by default.