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

Hierfür müssen Sie lediglich Folgendes hinzufügen content Attribut und font-family Attribut über :before oder :after an das gewünschte Element anhängen, wo immer dies möglich ist.

Zum Beispiel: Ich möchte ein Anhangssymbol anhängen nach alle a Element innerhalb meines Beitrags. Also, zuerst muss ich suchen, ob ein solches Symbol in fontawesome existiert. Wie in diesem Fall habe ich es gefunden ici d.h. fa fa-paperclip . Dann würde ich mit der rechten Maustaste auf das Symbol dort klicken und die Option ::before Pseudo-Eigenschaft zum Abrufen der content Tag, den es verwendet, was in meinem Fall folgendermaßen aussieht \f0c6 . Dann würde ich das in meinem css wie folgt verwenden:

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

Answer 2

Dies scheint die einfachste Lösung zu sein :-)

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