[Icon] Stacking icons

[princeandrew01]

Feature Request

The icons from Font Awesome are really great but one of the few things I don't get to use often is the ability to stack icons on top of one another. The reason I don't use it as often is the places where icons can be used it does not support the icons class and ends up being incorrectly styled.

Description

My request would be allow the syntax <i class="icons">*code*</i> to be used in the various places that icons are normally used.

Example

This example is a very simple one using the circular star icon vs using two icon elements in a header. The later is not styled correctly.
https://jsfiddle.net/princeandrew01/Lufkmaj3/3/

Testcase (when possible)

I added some of the styling for the header in this next example so that the styles for the icon and icons elements are the same.
https://jsfiddle.net/princeandrew01/Lufkmaj3/6/

Screenshot (when possible)

Before css styles:

After css styles:

[jamessampford]

You could always do what I did, and remove all the icons provided by this framework, but leave in some core icons (as used by the dropdown), and then use Font Awesome directly with their syntax, ie. <i class="fas fa-square"></i>? Then you could always follow Font Awesome's stacking code? https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

[prudho]

Aside from an header component, which component is broken with icons ?

[princeandrew01]

I haven't tested all of them but these are a few that I came across (I suspect it maybe broken for all but I can't confirm that).

https://jsfiddle.net/princeandrew01/Lufkmaj3/21/