Come modellare il colore dell'icona, le dimensioni e l'ombra delle icone Font Awesome

Risposte:

466

Dato che sono semplicemente dei caratteri, dovresti essere in grado di modellarli come caratteri:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
— David dice di ripristinare Monica
fonte
4
@ David Thomas: è una buona soluzione. Grazie per averlo pubblicato. Tuttavia, sono ANCORA sconcertato perché il font-awesome a volte mostra icone in bianco e talvolta in nero. QUAL È IL TRUCCO? Come ha sottolineato GirlCanCode2, gli esempi sul sito Web di FA mostrano icone e testo in bianco e nero. . . esaminando gli elementi in Firebug, tuttavia, il CSS per icone specifiche (ad es. icona-info) viene [sopra] scritto per essere bianco. È davvero quello che dobbiamo fare? Nessuna opzione icona bianca come in bootstrap.css?
— Ace
1
per cambiare il colore, controlla questo in SO, la speranza aiuta qualcuno
— shaijut
@Ace So che questo è vecchio e potresti averlo imparato ormai, ma anche per gli altri che hanno la domanda potresti voler esaminare la specificità qui e anche qui . L'altra cosa da sapere è la cascata CSS; ad esempio, vengono applicati stili e fogli di stile che seguono altri, a meno che i selettori delle regole di stile non siano meno specifici (come nella specificità). Quindi, la mia pratica preferita è quella di abbinare almeno la specificità e mettere lo stile dopo l'override.
— Giovanni
158

Puoi anche solo aggiungere uno stile in linea:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>
— dandrews
fonte
7
Nonostante l'elite dei voti negativi, questa risposta funziona bene. Perché font awesome è un font che risponde a stili e classi che influenzano il testo.
— AaronS
16
@NightOwl È inoltre consigliabile utilizzare minificazione, raggruppamento e memorizzazione nella cache di queste risorse. Nessuna delle risposte qui dimostra nessuna di queste cose, e cercare di far rispettare le migliori pratiche da seguire nel contesto di una risposta isolata è l'IMO elitario. Chiunque capisca i CSS dovrebbe essere in grado di prendere quello stile e spostarlo in una classe CSS.
— AaronS
4
@NightOwl Anche la risposta più votata è piuttosto terribile in termini di migliori pratiche. Non dovresti creare stili nei file CSS condivisi che fanno riferimento a elementi di #id, poiché solo un elemento sarebbe in grado di abbonarsi a quello stile su ogni pagina. Se lo declassassi per quel motivo, non sarei abbastanza elitario? Entrambi i rispondenti hanno fatto uno sforzo efficace per fornire informazioni utili al richiedente, e non credo che dovrebbero essere sottoposti a downgrade quando la loro risposta è effettivamente efficace.
— AaronS
31
Se qualcuno vuole soppiantare la risposta con un commento che indica che è generalmente buona pratica non usare gli stili in linea, allora sarebbe appropriato. Una risposta efficace e informativa non dovrebbe essere sottovalutata per tali banalità quando qualcuno avrebbe potuto semplicemente migliorare il valore esistente della risposta aggiungendo un commento.
— AaronS
1
Per me non ha senso inserire una semplice direttiva css a colori nella sua classe e raggrupparla con le tue risorse css. Cosa farai? class='icon-ok-sign my-red-class'? o class='icon-ok-sign-red'? Ciò lo rende meno leggibile e aggiunge un livello inutile di complessità.
— Nurettin,
114

Se si utilizza Bootstrap contemporaneamente, è possibile utilizzare:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

Altrimenti:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
— Qian Chen
fonte
1
Sicuramente la soluzione alla domanda non prevede l'uso di bootstrap
— JG Estiot il
1
Potrebbe non richiedere bootstrap, ma è così che ho trovato questa domanda. Grazie Elgs!
— Will Lovett,
1
Puoi vedere dallo screenshot che stanno già usando bootstrap. Avrebbe senso continuare a usarlo per mantenere la stessa tavolozza dei colori e non duplicare il codice.
— Simon Luijk,
sottile ma importante: il successo del testo è il colore del testo, non il colore della faccia del pulsante per il successo btn. Quindi, se vuoi che un'icona assomigli ad un "pulsante piatto", il successo del testo sarà leggermente diverso. Trovo che questo sia più evidente nell'avvertimento testuale, dal momento che è un brutto giallo al contrario di un'arancia molto visibile
— Josh Petitt,
44

Sembra che il colore dell'icona FontAwesome risponda a informazioni di testo, errori di testo, ecc.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
— user1695595
fonte
8
Per Bootstrap, <i class = "fa fa-warning text-danger"> </i>
— Mastro,
Questa è probabilmente la risposta migliore in questa pagina, almeno per me, poiché sto già usando Bootstrap e questo si adatta a quel paradigma.
— Jake Toronto,
17

file inyour.css:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

file inyour.html:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
— Gingin
fonte
13

C'è un modo davvero semplice per cambiare il colore delle icone Font Awesome. 

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>
Espandi frammento

È possibile modificare il codice esadecimale in base alle proprie preferenze. NOTA: il colore del testo cambierà anche il colore dell'icona a meno che non sia presente un tag style="color:#00cc6a"all'interno del itag.

— Calum Childs
fonte
9

Utilizzando l'aggiunta di FA 4.4.0

.text-danger
    color: #d9534f

al documento css e poi usando 

 <i class="fa fa-ban text-danger"></i>

cambia il colore in rosso. Puoi impostare il tuo per qualsiasi colore.

— Steve Gutierrez
fonte
9 
For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
— arif imtiaz
fonte
8

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

Qui ho definito uno stile globale nel mio CSS in cui il colore principale è una classe, nel mio caso è una tonalità blu chiaro. Trovo che usare gli stili in linea su Icone con Font Awesome funzioni bene, specialmente nel caso in cui si nominano i colori semanticamente, ad esempio nav-color se si desidera un colore separato per quello, ecc.

In questo esempio sul loro sito Web e su come ho scritto anche nel mio esempio, la versione più recente di Font Awesome ha modificato leggermente la sintassi regolando le dimensioni. Prima di essere:

icon-xxlarge

dove ora devo usare:

icon-3x

Naturalmente, tutto dipende da quale versione di Font Awesome è stata installata nel proprio ambiente. Spero che sia di aiuto.

— kinghenry14
fonte
7

In FontAwesome 4.0, le classi cambiano in 'fa-2x', 'fa-3x'.

— angelokh
fonte
7

Semplicemente puoi definire una classe nel tuo file css e metterla in cascata come nel file html 

<i class="fa fa-plus fa-lg green"></i>

ora scrivi in ​​css 

.green{ color:green}
— gdmanandamohon
fonte
6

Devi solo scegliere come target il nome della classe predefinita di tipo font fantastico

in ex:

HTML

<i class="fa fa-facebook"></i>

CSS

i.fa {
    color: red;
    font-size: 30px;
}
— Jonca33
fonte
5

Si prega di fare riferimento al link http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
— Brandon Yang
fonte
4

Ho avuto lo stesso problema quando ho provato ad usare le icone direttamente da BootstrapCDN (il modo più semplice). Quindi ho scaricato il file CSS e l'ho copiato nella cartella CSS del mio sito il file CSS (Descritto sotto il 'modo semplice' nella fantastica documentazione sui font), e tutto ha iniziato a funzionare come dovrebbe.

— Thanushka
fonte
3

Avvolgere il tag i in p o span, quindi è possibile utilizzare la classe css bootstrap

<p class="text-success"><i class="fa fa-check"></i></p>
— etlds
fonte
2

Per la versione SVG di Font Awesome 5 , utilizzare

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
— czLukasss
fonte
1

Come è stato sottolineato, le icone fantastiche dei caratteri sono testo, di conseguenza lo stile usando gli attributi CSS appropriati. Per esempio:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

Se, come succede un po 'per me, la dimensione dell'icona non cambia affatto, aggiungi "! Important" all'attributo size-font.

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}
— gmartinss
fonte
1

Per le icone di dimensionamento

Entrambi i nostri framework Web Fonts + CSS e SVG + JS includono alcuni controlli di base per il dimensionamento delle icone nel contesto dell'interfaccia utente della tua pagina.

puoi usare come

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

— TarangP
fonte
0

Modifica dinamicamente le proprietà css delle icone .fa-xxx:

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>
— yardpenalty.com
fonte
0

Non ti consiglierei di usare uno stile di carattere fantastico come il fa-5x ecc; per paura che possano cambiarlo e dovresti continuare a cercare il codice dell'applicazione per soddisfare gli standard più recenti. Puoi semplicemente evitarlo dando a ogni classe fantastica di font che vuoi stile uniformemente la stessa classe, dì:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

Qui la classe è fa-sabi-icone-sociali

Quindi nel tuo CSS puoi modellare i caratteri usando le stesse regole CSS con cui modifichi un carattere normale. per esempio

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

Ciò dovrebbe dare stile ai tuoi fantastici font

— kboul
fonte
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.