Usa Font Awesome Icons in CSS

Ho alcuni CSS che assomigliano a questo:

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

Vorrei sostituire l'immagine con un'icona di Font Awesome .

Non vedo comunque di usare l'icona nei CSS come immagine di sfondo. È possibile farlo supponendo che i fogli di stile / i caratteri Font Awesome siano caricati prima del mio CSS?

Non è possibile utilizzare il testo come immagine di sfondo, ma è possibile utilizzare le classi pseudo :beforeo :afterper posizionare un carattere di testo nel punto desiderato, senza dover aggiungere tutti i tipi di markup extra disordinati.

Assicurati di impostare position:relativeil wrapper di testo effettivo affinché il posizionamento funzioni.

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

MODIFICARE:

Font Awesome v5 utilizza altri nomi di font rispetto alle versioni precedenti:

• Per FontAwesome v5, versione gratuita, utilizzare: font-family: "Font Awesome 5 Free"
• Per FontAwesome v5, versione Pro, utilizzare: font-family: "Font Awesome 5 Pro"

Nota che dovresti impostare anche la stessa proprietà peso-peso (sembra essere 900).

Un altro modo per trovare il nome del font è fare clic con il tasto destro del mouse su un'icona impressionante del font di esempio sulla tua pagina e ottenere il nome del font (allo stesso modo è possibile trovare il codice dell'icona utf-8, ma nota che puoi trovarlo su :before).

Oltre alla risposta di Diodeus sopra, hai bisogno della font-family: FontAwesomeregola (supponendo che tu abbia la @font-faceregola per FontAwesome dichiarata già nel tuo CSS). Quindi si tratta di sapere quale valore del contenuto CSS corrisponde a quale icona.

Li ho elencati tutti qui: http://astronautweb.co/snippet/font-awesome/

In realtà anche i font-awesomeCSS hanno una strategia simile per impostare i loro stili di icone. Se vuoi ottenere una rapida sospensione del icon codice , controlla il non-minified font-awesome.cssfile e ci sono .... ogni carattere nella sua purezza.

Consolidando tutto quanto sopra, la seguente è la classe finale che funziona bene

   .faArrowIcon {
        position:relative;
    }

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

Puoi provare questa classe di esempio. e trova il contenuto dell'icona qui: 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";
    }

Per usare il font fantastico usando i CSS seguire i passaggi seguenti -

passaggio 1 - Aggiungi font di FontAwesome nei 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');
}

Step - 2 Usa sotto css per applicare il carattere sull'elemento class di HTML

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

E infine, usa la classe " sorting_asc " per applicare i CSS sul tag / elemento HTML desiderato.

Non è necessario incorporare contenuti nel CSS. Puoi inserire il contenuto del badge all'interno dell'elemento fa, quindi regolare il badge css. 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>

In alternativa, se si utilizza Sass, è possibile "estendere" le icone FA per visualizzarle:

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

Link di esempio: https://codepen.io/bungeedesign/pen/XqeLQg

Ottieni il codice icona da: https://fontawesome.com/cheatsheet?from=io

Per questo è sufficiente aggiungere l' contentattributo e l' font-familyattributo all'elemento richiesto tramite: before o: after ove applicabile.

Ad esempio: volevo allegare un'icona di allegato dopo tutto l' aelemento all'interno del mio post. Quindi, prima devo cercare se tale icona esiste in fontawesome. Come nel caso l'ho trovato qui , cioè fa fa-paperclip. Quindi fare clic con il pulsante destro del mouse sull'icona e andare alla ::beforeproprietà pseudo per recuperare il contenttag che sta utilizzando, che nel mio caso ho scoperto di essere \f0c6. Quindi lo userei nel mio CSS in questo modo:

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

Utilizzare il seguente programma Python tramite riga di comando per creare immagini png dalle icone Font-Awesome:

https://github.com/Pythonity/font-awesome-to-png