Font Awesome icons are slow to display

[ric2016]

This is an issue in both 2.0 and 2.1: The svgs for the icons are apparently loaded when the page is already rendered, leading to a FOUC-like effect.

This is visible on the demo server in several browsers (tested Forefox and Chrome), e.g. in the areas marked in the screenshots (initial vs final page display).

Maybe consider something like this? (I haven't tested it, there may be other solutions)

vs

[fisharebest]

The icons all use fa-fw (fixed-width), which sets width: 1.25rem.

So, the icon should load into a gap of the correct size.

But width only applies to block elements (e.g. svg) and not inline elements (e.g. i).

So, the width only applies after the icon is loaded, and the i is replaced by svg.

If I read the documentation correctly we should be able to add d-inline-block to the <i> elements... ...but this doesn't work.

[fisharebest]

I also tried adding width and inline-block to a wrapper around the icon and adding content   to it - but this doesn't help.