Das hat Hirnschmalz gekostet:
In einem Projekt wurden die Bootstrap-Glyphicons nicht geladen und nur als rechteckige Kästchen angezeigt.
Also dieser Code:
<span class="glyphicon glyphicon-alert"></span>
hat einfach ein Rechteck angezeigt und sonst nichts.
Schritte
Wir haben dann in den Developer Tools von Google Chrome das Netzwerk untersucht, geschaut, ob der IIS die WOFF2-Dateien richtig liefert und vieles andere probiert.
Trotzdem wurden die Font-Dateien der Glyphicons nicht geladen.
Nach viel ausprobieren haben wir schließlich das Rechteck selbst in den Developer Tools von Chrome untersucht und gesehen, dass der Font durchgestrichen war.
Dann ging es schnell mit der Lösung:
* {
font-family: Segoe UI, Arial, Helvetica, Sans-Serif !important;
}
Diese Regel hat mit ihrem Stern * bewirkt, dass sie auf alle Element angewendet wird, inklusive der Glypicon-<span>-Tags.
Und das !important hat dann den Font überschrieben, so dass der Glyphicon-Font gar nie geladen wurde. Stattdessen wurde das Glypicon mit dem Arial-Zeichensatz angezeigt, und da dieser das Zeichen nicht darstellen konnte, wurde eben das besagte Rechteck angezeigt.
Lösung
Die Lösung war dann, die CSS-Regel entsprechend anzupassen, bzw. gleich ganz zu löschen.
Anschließend wurden die Glyphicons korrekt angezeigt.