Come applicare il colore dell'icona, la dimensione e l'ombreggiatura di Font Icone impressionanti

Question

Come è possibile modellare il colore, la dimensione e l'ombra delle icone da Font Awesome Icons?

Per esempio, font Awesome site mostrerà alcune icone in bianco e un po 'in rosso, ma non mostrerà il CSS per come per lo stile in quel modo ...

Answer 1

Dato che essi' re semplicemente font, allora si dovrebbe essere in grado per lo stile loro come tipi di carattere:

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

Answer 2

Sembra che il colore dell'icona FontAwesome risponde al testo-info, testo errore, ecc

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

Answer 3

È anche possibile aggiungere stile in linea:

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

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

Answer 4

credito: Can I change the color of Font Awesome's icon color?

(questa risposta costruisce su quella risposta)

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

inour.css file:

file di

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

inyour.html:

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

Answer 5

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 cui principale-colore è una classe, nel mio caso si tratta di 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 nav-color se si desidera un colore distinto, ecc.

In questo esempio sul proprio sito Web , e come ho scritto nel mio esempio, così, l'ultima versione di Font Impressionante è cambiata la sintassi un po 'di regolare la size.before di una volta:

icon-xxlarge 

dove ora devo usare:

icon-3x 

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

Answer 6

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.

Answer 7

file di inyour.css:

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

inyour.file html:

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

Answer 8

In FontAwesome 4.0, le classi passare alla 'fa-2x', 'fa-3x'.

Answer 9

Se si utilizza Bootstrap, allo stesso tempo, è 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> 

Answer 10

Utilizzando FA 4.4.0 aggiungendo

.text-danger 
    color: #d9534f 

al documento css e quindi utilizzando

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

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

Answer 11

Avvolgere il tag i in p o luce, quindi è possibile utilizzare classe CSS bootstrap

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

Answer 12

modificare dinamicamente le proprietà CSS di 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> 

Answer 13

Si prega di fare riferimento alla 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> 

Answer 14

Semplicemente si può definire una classe in il file CSS e cascata in file html come

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

ora scrivono in css

.green{ color:green} 

Answer 15

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

Answer 16

C'è un modo molto semplice per cambiare il colore dei caratteri icone impressionanti.

<!-- 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 alle proprie preferenze. NOTA: Il colore del testo cambierà il colore dell'icona così a meno che non v'è un style="color:#00cc6a" all'interno del tag i.

Answer 17

Come è stato sottolineato, di carattere impressionante icone sono di testo, di conseguenza, il tuo stile utilizzando gli attributi CSS appropriati. Per esempio:

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

Se, come accade un po 'per me, la dimensione delle icone non cambia affatto, aggiungere l'attributo font-size "importante!".

Answer 18

Non vorrei consigliarvi di usare lo stile di font incorporato come il fa-5x ecc; per paura che possano cambiarlo e tu dovresti continuare a dare il codice della tua applicazione per soddisfare gli standard più recenti.È sufficiente evitare questo dando ogni classe font-impressionante che si desidera per lo stile in modo uniforme alla stessa classe dici:

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

Poi nel CSS è possibile la stile i caratteri usando le stesse regole CSS con cui si disegnerebbe un font normale. esempio

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

}

Questo dovrebbe ottenere il vostro font fonts-impressionante in stile

Answer 19

Basta indirizzare font-impressionante nome classe predefinita

nella ex:

HTML

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

CSS

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