Font Awesome-Symbole in CSS verwenden

Question

Ich habe ein CSS, das wie folgt aussieht:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

Ich möchte das Bild durch ein Symbol aus Font Awesome .

Ich sehe keine Möglichkeit, das Symbol in CSS als Hintergrundbild zu verwenden. Ist dies möglich zu tun, vorausgesetzt, die Font Awesome Stylesheets/Schriftarten werden vor meinem CSS geladen?

Answer 1

Sie können keinen Text als Hintergrundbild verwenden, aber Sie können die :before o :after Pseudoklassen, um ein Textzeichen dort zu platzieren, wo Sie es haben wollen, ohne alle Arten von unordentlicher zusätzlicher Markierung hinzufügen zu müssen.

Vergewissern Sie sich, dass Sie position:relative auf Ihrem tatsächlichen Text Wrapper für die Positionierung zu arbeiten.

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

EDITAR:

Font Awesome v5 verwendet andere Schriftartennamen als ältere Versionen:

• Für FontAwesome v5, kostenlose Version, verwenden: font-family: "Font Awesome 5 Free"
• Für FontAwesome v5, Pro Version, verwenden: font-family: "Font Awesome 5 Pro"

Beachten Sie, dass Sie denselben Schriftart und -gewicht Eigenschaft auch (scheint 900 zu sein).

Eine andere Möglichkeit, den Namen der Schriftart herauszufinden, besteht darin, mit der rechten Maustaste auf das Symbol einer Beispielschriftart auf Ihrer Seite zu klicken und den Namen der Schriftart abzurufen (auf dieselbe Weise kann auch der utf-8-Symbolcode ermittelt werden, aber beachten Sie, dass Sie ihn auf :before ).

Answer 2

Eigentlich sogar font-awesome CSS verfolgt eine ähnliche Strategie bei der Festlegung seiner Symbolstile. Wenn Sie einen schnellen Zugriff auf die icon Code überprüfen Sie die non-minified font-awesome.css Datei und dort sind sie.... jede Schrift in ihrer Reinheit.

Answer 3

Wenn man alles zusammenfasst, ergibt sich die folgende Klasse, die gut funktioniert

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

Answer 4

Um font awesome mit css zu verwenden, folgen Sie den folgenden Schritten -

Schritt 1 - Schriftarten von FontAwesome in CSS hinzufügen

/*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 HTML-Element class 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;
}

Und schließlich, verwenden Sie " sortieren_ask "Klasse, um das Css auf das gewünschte HTML-Tag/Element anzuwenden.

Answer 5

Sie können diese Beispielklasse ausprobieren. und finden den Inhalt des Symbols 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";
    }