Usa l'icona Font Awesome come contenuto CSS


279

Voglio usare un'icona Font Awesome come contenuto CSS, ovvero

a:before {
    content: "<i class='fa...'>...</i>";
}

So di non poter usare il codice HTML content, quindi rimangono solo le immagini?


Dalla memoria non è possibile iniettare HTML nel DOM usando l'attributo content. Solo un semplice vecchio testo.
Mike Causer,

Risposte:


634

Aggiornamento per FontAwesome 5 Grazie ad Aurelien

È necessario modificare la font-familya Font Awesome 5 BrandsO Font Awesome 5 Free, in base al tipo di icona che si sta cercando di rendere. Inoltre, non dimenticare di dichiararefont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

dimostrazione

Puoi leggere il resto della risposta qui sotto per capire come funziona e per conoscere alcune soluzioni alternative per la spaziatura tra icona e testo.


FontAwesome 4 e versioni precedenti

Questo è il modo sbagliato di usarlo. Apri il fantastico foglio di stile del carattere, vai al classtipo di carattere che vuoi usare diciamo fa-phone, copia la proprietà del contenuto sotto quella classe con l'entità e usala come:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

dimostrazione

Assicurati solo che se stai cercando di scegliere come target un atag specifico , allora considera l'utilizzo di un classinvece di renderlo più specifico come:

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

Usando il modo sopra attaccherai l'icona con il tuo testo rimanente, quindi se vuoi avere un po 'di spazio tra i due, crealo display: inline-block;e usa alcuni padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

Estendere ulteriormente questa risposta, poiché molti potrebbero avere un requisito per cambiare un'icona al passaggio del mouse, quindi per questo, possiamo scrivere un selettore separato e regole per l' :hoverazione:

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

dimostrazione

Ora nell'esempio sopra, l'icona spinge a causa delle diverse dimensioni e sicuramente non lo vuoi, quindi puoi impostare un fisso widthsulla dichiarazione di base come

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

dimostrazione



Con font-family: FontAwesome;esso cambia anche il carattere per i tag di ancoraggio. Come possiamo gestirlo?
Shubh,

@Shubh legge attentamente il codice, font-familysi suppone che venga chiamato su :beforepseudo e non tag di ancoraggio
Mr. Alien,

Ho pensato di aggiungere qui che puoi trovare le specifiche unicode per una particolare icona senza dover scavare nella fonte. Basta andare all'elenco delle icone sul fantastico sito Web dei font e fare clic sull'icona desiderata. Vedrai il valore Unicode nella pagina proprio sotto i campioni dell'icona: fortawesome.github.io/Font-Awesome/icon/pencil-square-o
Allen Underwood

Questo elenco Unicode CSS per FontAwesome è migliore: astronautweb.co/snippet/font-awesome perché mostra i contentcodici corretti per la copia diretta (cioè un gioco da ragazzi). PS: Mi chiedo ancora perché i ragazzi di FontAwesome non inseriscono i codici dei contenuti in ogni pagina dell'icona ?!
Kai Noack,

25

Un'altra soluzione senza che tu debba fare confusione manualmente con i caratteri Unicode può essere trovata in Rendere straordinario il carattere - Usare icone senza i-tag ( disclaimer: ho scritto questo articolo ).

In poche parole, puoi creare una nuova classe come questa:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    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);
}

E poi usalo con qualsiasi icona, ad esempio:

<a class="icon fa-car" href="#">This is a link</a>

23

Se hai accesso ai file SCSS da font-awesome, puoi usare questa semplice soluzione:

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}


3

È possibile utilizzare Unicode per questo in CSS. Se stai usando font awesome 5, questa è la sintassi;

.login::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";  
}

Puoi vedere la loro documentazione qui .


3

Dovresti avere il font font impostato su 900 affinché Font Awesome 5 Free font-family funzioni.

Questo è quello funzionante:

.css-selector::before {
   font-family: 'Font Awesome 5 Free';
   content: "\f101";
   font-weight: 900;
}

1

Come dice sul sito web FontAwesome FontAwesome =>

HTML:

<span class="icon login"></span> Login</li>

CSS:

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
   }

In .login::before-> modifica content:'';per adattarsi al tuo Unicode.


1

Aggiornamento per Font Awesome 5 utilizzando SCSS

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

0

Ecco la mia fantastica soluzione 5 per i font webpack 4 +:

plugin webpack:

new CopyWebpackPlugin([
    { from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
  ]),

stile css globale:

@font-face {
    font-family: 'FontAwesome';
    src: url('/font-awesome/fontawesome-webfont.eot');
    src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: "FontAwesome";
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.