Ich benutze die Font-Super-Icons mit der empfohlenen Javascript-Referenz:Font-awesome Icons ersten Platzhalter?
<script src="https://use.fontawesome.com/7c7031cd1a.js"></script>
Wenn die Seite fertig geladen und die Symbole erscheinen, alle Textstrings und/oder Elemente um, wo Symbole gesetzt Art erscheinen Springe in Position, wenn jedes Symbol seinen zugewiesenen Breitenraum einnimmt.
Jeder Weg, das zu vermeiden? Vielen Dank.
Was Sie sehen, ist bekannt als Flash of Invisible Text (oder Flash of Unstyled Inhalte). Dies liegt daran, dass die Seite gerendert wird, bevor die externe Schriftart heruntergeladen wird. Wenn die Symbolschrift heruntergeladen und bereit ist, wird die Seite neu gezeichnet.
Es ist möglich - aber nicht empfehlenswert (!) - die gesamte Seite zu blockieren, bis die Schriftarten geladen sind. Sie können dies tun, indem Sie die <html> während des Ladens der Schriftarten ausblenden. Sobald sie an ihrem Platz sind, wird die Klasse .fa-events-icons-loading aus dem <html> durch das font awesome Skript entfernt und alles wird gleichzeitig im Browserfenster angezeigt.
html.fa-events-icons-loading body {
display: none;
}
Sie können This non-blocking example mit this blocking version vergleichen. Die Effekte sind nicht zu sehen, aber der erste zeigt den Text zuerst an und wird dann mit den Icons neu gezeichnet, wenn sie geladen werden. Die zweite wird alles ausblenden, bis die Symbole geladen sind.
Edit: Sie mehr über asynchronous loading over at the Font Awesome Blog
, warum Sie die Schrift-awesome js verwenden und nicht die CSS lesen kann? – JiiB