risposta-alla-domanda-sullo-sviluppo-web-bd.com

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

Come posso personalizzare il colore, la dimensione e l'ombra delle icone da Font Awesome's Icons ?

Ad esempio, Font Awesome's site mostrerà alcune icone in bianco e alcune in rosso ma non mostrerà la variabile CSS per come modificarle in questo modo ...

enter image description here

310
Elias7

Dato che sono semplicemente font, quindi dovresti essere in grado di modellarli come font:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
421
David Thomas

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

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>
94
Elgs Qian Chen

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

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

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.

10
Calum Childs

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.

8
kinghenry14

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.

8
Steve Gutierrez

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

7
angelokh

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}
6
gdmanandamohon

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>
5
Brandon Yang

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;
}
4
Jonca33

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

4
arif imtiaz

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.

4
Thanushka

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

Per Font Awesome 5 SVG versione, usa 

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

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

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;
}
0
gmartinss

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

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

0
Lawrence Oputa
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
0
Dan Alboteanu