Cómo estilo icono color, tamaño y sombra de Iconos de Fuente Impresionante

También puedes añadir estilo en línea:

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

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

Si está usando Bootstrap al mismo tiempo, puede usar:

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

De lo contrario:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

Parece que el color del icono FontAwesome responde a text-info, text-error, etc.

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

En su.archivo css:

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

En su.archivo html:

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

Hay una manera muy simple de cambiar el color de los iconos de Fuente Impresionante.

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

Puede cambiar el código hexadecimal a su preferencia. NOTA: El color del texto también cambiará el color del icono a menos que haya un style="color:#00cc6a" dentro de la etiqueta i.

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

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

Aquí he definido un estilo global en mi CSS donde main-color es una clase, en mi caso es un tono azul claro. Me parece que el uso de estilos en línea en los iconos con Fuente Impresionante funciona bien, esp en el caso cuando el nombre de sus colores semánticamente, es decir, nav-color si desea un color separado para eso, etc.

En este ejemplo en su sitio web, y cómo he escrito en mi ejemplo también, la versión más reciente de Font Awesome ha cambiado ligeramente la sintaxis para ajustar el tamaño.Antes solía ser:

icon-xxlarge

Donde ahora tengo que usar:

icon-3x

Por supuesto, todo esto depende de la versión de Font Awesome que haya instalado en su entorno. Espero que esto ayude.

Usando FA 4.4.0 añadiendo

.text-danger
    color: #d9534f

Al documento css y luego usando

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

Cambia el color a rojo. Usted puede fijar su propio para cualquier color.

En FontAwesome 4.0, las clases cambian a 'fa-2x', 'fa-3x'.

Simplemente puede definir una clase en su archivo css y colocarla en cascada en un archivo html como

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

Ahora escribe en css

.green{ color:green}

Por Favor, consulte el enlace 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>

Tuve el mismo problema cuando intenté usar los iconos directamente desde BootstrapCDN (la forma más fácil). Luego descargué el archivo CSS y lo copié en la carpeta CSS de mi sitio, el archivo CSS (descrito en la "manera fácil" en la documentación font awesome), y todo comenzó a funcionar como debería.

Crédito: ¿Puedo cambiar el color del icono de Font Awesome?

(esta respuesta se basa en esa respuesta)

(para el icono de marcador, por ejemplo:)

En su.archivo css:

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

En su.archivo html:

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

Solo fuente de destino-impresionante nombre de clase predefinido

En ex:

HTML

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

CSS

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

Envuelva la etiqueta i en p o span, luego puede usar la clase css bootstrap

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

For Font Awesome 5 SVG version, use

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

Cambiar dinámicamente las propiedades css de .fa - xxx iconos:

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

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

Como se ha señalado, los iconos de font awesome son texto, por lo tanto, se le da estilo utilizando los atributos CSS apropiados. Por ejemplo:

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

Si, como me sucede bastante, el tamaño del icono no cambia en absoluto, agregue"!importante " para el atributo font-size.

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

No le aconsejaría que use un estilo impresionante de fuente incorporado como el fa-5x, etc.; por temor a que lo cambien y tenga que seguir encadenando el código de su aplicación para cumplir con el último estándar. Simplemente evita esto dando a cada fuente-impresionante clase que desea estilo uniformemente la misma clase decir:

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

Aquí la clase es fa-sabi-social-icons

A continuación, en su css puede el estilo de las fuentes utilizando las mismas reglas css que el estilo de una fuente normal con. por ejemplo,

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

}

Que debe obtener su fuente-fuentes impresionantes estilo

Para el Tamaño : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

Para El Color: <i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i> Para Shadow : .fa-linkedin-square{ sombra de texto: 3px 6px # 272634; }``