Font Awesome icons are broken when the icon class is set on .btn or a.button elements

In all example pages by Font-awesome and Bootstrap the icon is always defined by a child element:

• https://fontawesome.com/v4/examples/,
• https://getbootstrap.com/docs/3.4/components/#glyphicons

The Font Awesome documentation states:

Don't mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

and also:

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

IMO the past behavior was actually a bug.