Verwenden Sie Font Awesome Icons in CSS

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?

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).

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/

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.

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"; 
    }

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";
    }

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.

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>

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.
}

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

Beispiel Link: https://codepen.io/bungeedesign/pen/XqeLQg

Den Symbolcode erhalten Sie unter: https://fontawesome.com/cheatsheet?from=io

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 */
    }

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