Verwenden Sie Font Awesome Icons in CSS

305

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?

L84
quelle
Glyphen aus Schriftarten können nicht als Hintergrund verwendet werden. SVGs jedoch kann
cimmanon
@ Cimmanon würde es Ihnen etwas ausmachen zu erklären, wie das für Font-
Awesome
@BonsaiOak Was ist zu erklären, was nicht bereits durch die ausgewählte Antwort erklärt wird? Wenn Sie eine Frage haben, die von dieser (oder einer anderen Frage zu SO) nicht beantwortet wird, stellen Sie eine neue Frage.
Cimmanon
@ Cimmanon Entschuldigung für die Unklarheit. Sie schienen zu implizieren, dass es möglich war, ein Symbol aus der Schriftartdatei font-awesome.svg als Hintergrund zu verwenden. Sie haben das jedoch nie explizit gesagt, daher bin ich mir nicht sicher.
BonsaiOak
1
@BonsaiOak Ja, Sie können ein SVG als Hintergrundbild verwenden, genauso wie Sie jedes andere Bild verwenden würden. Ich habe mir das FontAwesome SVG jedoch nicht angesehen, um zu überprüfen, ob es auf diese Weise verwendet werden kann.
Cimmanon

Antworten:

489

Sie können keinen Text als Hintergrundbild verwenden, aber Sie können die :beforeoder die :afterPseudoklassen 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:relativeStellen Sie sicher, dass Sie Ihren eigentlichen Textumbruch so einstellen, dass die Positionierung funktioniert.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

BEARBEITEN:

Font Awesome v5 verwendet andere Schriftnamen als ältere Versionen:

  • Verwenden Sie für FontAwesome v5, Free Version: font-family: "Font Awesome 5 Free"
  • Verwenden Sie für FontAwesome v5, Pro Version: 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).

Diodeus - James MacFarlane
quelle
63
Das Textäquivalent
Matthieu
61
Sie müssen & # x von Anfang an entfernen und; vom Ende. Der Name der Schriftfamilie lautet FontAwesome
Matthieu
5
@ David, es ist nur Text, verwenden font-size.
JCM
6
für FontAwesome v5 müssen Sie verwenden .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
Digvijayad
5
Nur ein Hinweis, dass dies mit Eingabeelementen (wie einer Senden-Schaltfläche) nicht zu funktionieren scheint, da sie Folgendes nicht zu unterstützen scheinen: vorher oder nachher.
Mir
70

Neben der obigen Antwort von Diodeus benötigen Sie die font-family: FontAwesomeRegel (vorausgesetzt, Sie haben die @font-faceRegel 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/

Astrotim
quelle
1
arbeitete, nachdem ich Position entfernt hatte: absolut; in der .element: vorher, jetzt kann ich meine Links mit Schriftart-Symbolen dekorieren, aber meine benutzerdefinierte Schriftart des Links
behalten
tolle Liste der Inhaltswerte!
Anthony
1
Wie in der Antwort von @staabm erwähnt, führt FontAwesome eine offizielle Liste der Codes für jede Glyphe: fontawesome.io/cheatsheet
alxndr
24

Tatsächlich verfolgt sogar font-awesomeCSS eine ähnliche Strategie zum Festlegen der Symbolstile. Wenn Sie schnell auf den icon Code zugreifen möchten , überprüfen Sie die non-minified font-awesome.cssDatei und dort sind sie ... jede Schriftart in ihrer Reinheit.

Screenshot der Font-Awesome CSS-Datei

Akash
quelle
22

Im Folgenden wird die letzte Klasse zusammengefasst, die gut funktioniert

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }
Lakshman Pilaka
quelle
Beste Antwort, da Sie einfach ein vorheriges <i> -Tag vor dem gewünschten Text mit dem Symbol entfernen und durch dieses ersetzen können. Und der gleiche Raum ist gegeben.
andygoestohollywood
7

Sie können diese Beispielklasse ausprobieren. und finden Sie Icon-Inhalte hier: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }
Shiv Singh
quelle
6

Befolgen Sie die folgenden Schritte, um die Schriftart fantastisch mit CSS zu verwenden:

Schritt 1 - Hinzufügen von FontAwesome-Schriftarten in CSS

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

Schritt - 2 Verwenden Sie das folgende CSS, um die Schriftart auf das Klassenelement von HTML anzuwenden

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

Verwenden Sie schließlich die Klasse " sorting_asc ", um das CSS auf das gewünschte HTML-Tag / Element anzuwenden.

Ravindra Vairagi
quelle
2

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/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>
George Hix
quelle
8
"Keine Notwendigkeit, Inhalte in das CSS einzubetten". Nun, in einigen Situationen wird es benötigt.
Stéphane Bruckert
2
Wenn Sie sich nicht für progressive Verbesserungen interessieren, ist das in Ordnung, aber Sie sollten Ihr Styling wirklich in einer CSS-Datei behalten, wann immer dies möglich ist.
Adam Carr
2

Wenn Sie Sass verwenden, können Sie alternativ FA-Symbole "erweitern", um sie anzuzeigen:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}
Hiura
quelle
0

Dazu müssen Sie nur das contentAttribut und hinzufügenfont-family dem gewünschten Element Attribut über: vor oder: nach, wo immer dies zutreffend ist.

Zum Beispiel: Ich wollte nach allen aElementen 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 , dh fa fa-paperclip. Dann würde ich dort mit der rechten Maustaste auf das Symbol klicken und die ::beforePseudo-Eigenschaft aufrufen, um das verwendete contentTag abzurufen, das ich in meinem Fall gefunden habe \f0c6. Dann würde ich das in meinem CSS so verwenden:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }
Animesh Singh
quelle