Wie verwende ich Font Awesome-Symbole als CSS-Inhalt?

Verwenden Sie Font Awesome-Symbole als CSS-Inhalt

Vermeiden Sie bei der Verwendung von Font Awesome-Symbolen als CSS-Inhalt die direkte Einbettung von HTML-Code in die Inhaltseigenschaft. Befolgen Sie stattdessen diese Schritte:

FontAwesome 5:

1. Definieren Sie die Schriftfamilie als „Font Awesome 5 Free“ oder „Font Awesome 5 Brands“, je nachdem den Symboltyp.
2. Verwenden Sie den Unicode-Escape-Code anstelle von HTML-Entitäten für das Symbol, z. B. „f095“ für „fa-phone“.
3. Stellen Sie sicher, dass die Schriftstärke auf 900 eingestellt ist.

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

FontAwesome 4 und niedriger:

1. Kopieren Sie die Content-Eigenschaft mit der entsprechenden Entität aus dem Font Awesome-Stil Blatt.
2. Verwenden Sie den kopierten Inhalt innerhalb der Content-Eigenschaft mit der richtigen Schriftfamilie.

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

Für den Abstand zwischen Symbol und Text:

1. Anzeige einstellen: inline-block; damit sich das Symbol nicht überlappt.
2. padding-right hinzufügen: um Platz zwischen den beiden zu schaffen.

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

So ändern Sie das Symbol beim Schweben:

1. Erstellen Sie einen separaten Selektor für den :hover-Status.
2. Ändern Sie die Inhaltseigenschaft, um den neuen Unicode-Escape-Code anzugeben das Hover-Symbol.

a:hover:before {
    content: "\f099";
}

Erwägen Sie, eine feste Breite für die Deklaration des Basissymbols festzulegen, um ein Verschieben aufgrund unterschiedlicher Symbolgrößen zu verhindern.

Das obige ist der detaillierte Inhalt vonWie verwende ich Font Awesome-Symbole als CSS-Inhalt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!