Ich habe ein CSS, das so aussieht:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
Ich möchte das Bild durch ein Symbol von Font Awesome ersetzen .
Ich sehe sowieso nicht, das Symbol in CSS als Hintergrundbild zu verwenden. Ist dies möglich, wenn die Font Awesome-Stylesheets / -Schriften vor meinem CSS geladen werden?
css
font-awesome
L84
quelle
quelle
Antworten:
Sie können keinen Text als Hintergrundbild verwenden, aber Sie können die
:before
oder die:after
Pseudoklassen verwenden, um ein Textzeichen an der gewünschten Stelle zu platzieren, ohne alle Arten von unordentlichen zusätzlichen Markierungen hinzufügen zu müssen.position:relative
Stellen Sie sicher, dass Sie Ihren eigentlichen Textumbruch so einstellen, dass die Positionierung funktioniert.BEARBEITEN:
Font Awesome v5 verwendet andere Schriftnamen als ältere Versionen:
font-family: "Font Awesome 5 Free"
font-family: "Font Awesome 5 Pro"
Beachten Sie, dass Sie auch dieselbe Eigenschaft für die Schriftgröße festlegen sollten (scheint 900 zu sein).
Eine andere Möglichkeit, den Schriftnamen zu finden, besteht darin, mit der rechten Maustaste auf ein Beispielsymbol für eine fantastische Schriftart auf Ihrer Seite zu klicken und den Schriftartnamen abzurufen (genauso wie der Symbolcode für utf-8 gefunden werden kann, aber beachten Sie, dass Sie ihn auf finden können
:before
).quelle
font-size
..backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
Neben der obigen Antwort von Diodeus benötigen Sie die
font-family: FontAwesome
Regel (vorausgesetzt, Sie haben die@font-face
Regel für FontAwesome bereits in Ihrem CSS deklariert). Dann müssen Sie wissen, welcher CSS-Inhaltswert welchem Symbol entspricht.Ich habe sie alle hier aufgelistet: http://astronautweb.co/snippet/font-awesome/
quelle
Tatsächlich verfolgt sogar
font-awesome
CSS eine ähnliche Strategie zum Festlegen der Symbolstile. Wenn Sie schnell auf denicon
Code zugreifen möchten , überprüfen Sie dienon-minified font-awesome.css
Datei und dort sind sie ... jede Schriftart in ihrer Reinheit.quelle
Im Folgenden wird die letzte Klasse zusammengefasst, die gut funktioniert
quelle
Sie können diese Beispielklasse ausprobieren. und finden Sie Icon-Inhalte hier: http://astronautweb.co/snippet/font-awesome/
quelle
Befolgen Sie die folgenden Schritte, um die Schriftart fantastisch mit CSS zu verwenden:
Schritt 1 - Hinzufügen von FontAwesome-Schriftarten in CSS
Schritt - 2 Verwenden Sie das folgende CSS, um die Schriftart auf das Klassenelement von HTML anzuwenden
Verwenden Sie schließlich die Klasse " sorting_asc ", um das CSS auf das gewünschte HTML-Tag / Element anzuwenden.
quelle
Es ist nicht erforderlich, Inhalte in das CSS einzubetten. Sie können den Ausweisinhalt in das fa-Element einfügen und dann den Ausweis-CSS anpassen. http://jsfiddle.net/vmjwayrk/2/
quelle
Wenn Sie Sass verwenden, können Sie alternativ FA-Symbole "erweitern", um sie anzuzeigen:
quelle
Beispiel Link: https://codepen.io/bungeedesign/pen/XqeLQg
Den Symbolcode erhalten Sie unter: https://fontawesome.com/cheatsheet?from=io
quelle
Dazu müssen Sie nur das
content
Attribut und hinzufügenfont-family
dem gewünschten Element Attribut über: vor oder: nach, wo immer dies zutreffend ist.Zum Beispiel: Ich wollte nach allen
a
Elementen in meinem Beitrag ein Anhangssymbol anhängen . Also muss ich zuerst suchen, ob ein solches Symbol in fontawesome vorhanden ist. Wie in dem Fall, dass ich es hier gefunden habe , dhfa fa-paperclip
. Dann würde ich dort mit der rechten Maustaste auf das Symbol klicken und die::before
Pseudo-Eigenschaft aufrufen, um das verwendetecontent
Tag abzurufen, das ich in meinem Fall gefunden habe\f0c6
. Dann würde ich das in meinem CSS so verwenden:quelle
Verwenden Sie das folgende Python-Programm über die Befehlszeile, um PNG-Bilder aus Font-Awesome-Symbolen zu erstellen:
https://github.com/Pythonity/font-awesome-to-png
quelle