Symbole, die nur geladen werden, wenn Stylesheet enthalten ist

Question

Ich verwende Semantic UI, um eine Website zu erstellen und Font Awesome-Symbole zu verwenden. Ich habe bemerkt, dass die Symbole nicht richtig geladen werden und einfach als Quadrate angezeigt werden. Wenn ich den Link zu meinem CSS-Stylesheet für die Seite entferne, werden die Symbole jedoch korrekt angezeigt. Sobald ich den Link wieder einfüge, erscheinen sie wieder als Quadrate.

Ich finde das eher verwirrend und problematisch. Irgendeine Idee was könnte das verursachen? Ich möchte natürlich ein Stylesheet für die Seite haben!

Answer 1

ich es geschafft, das Problem zu einem einzigen Teil meines Sheet zum Ziel: * { font-family: Avenir, sans-serif !important; } ich diese Zeile schrieb die Website Schrift zu standardisieren, aber es ist, dass Zeile, die mit den Symbolen in Konflikt wird. Irgendeine Idee, warum das so ist? Und irgendwelche Vorschläge für das Setzen der Schriftart in einer Weise, die nicht in Konflikt gerät?

!important weist die Eigenschaft an, jede Spezifität zu ignorieren. Dies bedeutet, dass Ihre font-family Deklaration die Font Awesome Schriftart vollständig überschreiben wird.

die einzigen Dinge Browser so einstellen Allgemeinen explizit font-family auf die html, body, input, select, textarea und button Elemente. Vor diesem Hintergrund sollten Sie in der Lage sein, vollständig alle Standard außer Kraft zu setzen Schriftarten, indem Sie einfach die folgenden:

html, body, button, input, select, textarea { 
    font-family: Avenir, sans-serif; 
} 

Wenn das nicht für Sie arbeiten, überprüfen Sie Ihre Seite, um zu bestimmen, wo Ihre eigene Schriftart isn‘ t enthalten sein und diese Selektoren in die obige Deklaration einfügen.

Answer 2

Das Stylesheet überschreibt möglicherweise die Font Awesome-Symbole. Sie können versuchen, alle Symbole aus Ihrem Stylesheet zu entfernen, falls vorhanden. Lass mich wissen, ob das funktioniert.