Come personalizzare il colore, la dimensione e l'ombra delle icone Font Awesome

Puoi anche aggiungere semplicemente stile in linea:

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

<i class="icon-warning-sign" style="color:red"></i>

Se stai usando Bootstrap allo stesso tempo, puoi usare:

<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>

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

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>

file inour.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>

C'è un modo molto 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>

È 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 ci sia un style="color:#00cc6a" all'interno del tag i.

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 l'uso di stili in linea su Icone con Font Awesome funzioni bene, specialmente nel caso in cui si definiscono i colori in modo semantico, ad esempio colore-colore se si desidera un colore separato per quello, ecc.

In questo esempio sul loro sito web, e come ho scritto anche nel mio esempio, la versione più recente di Font Awesome ha modificato leggermente la sintassi della regolazione della dimensione.Prima che fosse:

icon-xxlarge

dove ora devo usare:

icon-3x

Naturalmente, tutto dipende da quale versione di Font Awesome hai installato sul tuo ambiente. Spero che questo ti aiuti.

Usando l'aggiunta di FA 4.4.0

.text-danger
    color: #d9534f

al documento css e quindi usando 

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

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

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

Semplicemente puoi definire una classe nel tuo file css e convertirla a cascata in un file html come 

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

ora scrivi in ​​css 

.green{ color:green}

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>

Basta scegliere il nome di classe predefinito font-awesome 

in es:

HTML

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

CSS

i.fa {
    color: red;
    font-size: 30px;
}

Per dimensioni: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

Per colore: <i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i> Per ombra: .fa-linkedin-square { text-shadow: 3px 6px # 272634; } ``

Ho avuto lo stesso problema quando ho provato a utilizzare le icone direttamente da BootstrapCDN (il modo più semplice). Poi ho scaricato il file CSS e l'ho copiato nella cartella CSS del mio sito il file CSS (descritto in "modo semplice" nella documentazione impressionante di carattere), e tutto ha iniziato a funzionare come dovrebbero.

Credito: Posso cambiare il colore del colore dell'icona di Font Awesome?

(questa risposta builds su quella risposta)

(per l'icona del segnalibro, ad esempio :)

file inour.css:

.icon-bookmark.icon-white {
    color: white;
}

file inyour.html:

<div class="icon-bookmark icon-white"></div>

Per Font Awesome 5 SVG versione, usa 

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));

Avvolgi il tag i in p o span, quindi puoi utilizzare la classe cst di bootstrap

<p class="text-success"><i class="fa fa-check"></i></p>

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

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

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

.fa-Twitter-square {
    font-size: 15px !important;
    color: red;
}

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>

Non ti consiglierei di usare uno stile fantastico, come il fa-5x etc; per paura che possano cambiarlo e tu dovresti continuare a dare il codice della tua applicazione per soddisfare gli standard più recenti. Evitatelo semplicemente dando ad ogni classe di font che volete stilare in modo uniforme, la stessa classe dice:

<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-social-icons

Quindi nel tuo css puoi usare lo stile dei caratteri usando le stesse regole css per creare un font normale con . E.g

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

}

Dovresti ottenere i tuoi font fantastici in stile

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);