Cómo estilo icono color, tamaño y sombra de Font Awesome Icons

¿Cómo podría diseñar el color, el tamaño y la sombra de los icons de Font Awesome’s Icons ?

Por ejemplo, el sitio de Font Awesome mostrará algunos íconos en blanco y algunos en rojo, pero no mostrará el CSS sobre cómo diseñarlos de esa manera …

enter image description here

Dado que simplemente son fonts, entonces debería poder diseñarlas como fonts:

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

También puede agregar estilo en línea:

   

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

  

De otra manera:

  

Parece que el color del icono FontAwesome responde a información de texto, error de texto, etc.

 

archivo inyour.css:

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

archivo inyour.html:

   Book  OK 

Hay una manera muy simple de cambiar el color de los icons de Font Awesome.

         

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

  

Aquí he definido un estilo global en mi CSS donde el color principal es una clase, en mi caso es un tono azul claro. Encuentro que el uso de estilos en línea en los icons con Font Awesome funciona bien, especialmente en el caso de que nombre sus colores semánticamente, es decir, color de navegación 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 syntax de ajustar el tamaño. Antes solía ser:

 icon-xxlarge 

donde ahora tengo que usar:

 icon-3x 

Por supuesto, todo esto depende de qué versión de Font Awesome hayas instalado en tu entorno. Espero que esto ayude.

Usando FA 4.4.0 agregando

 .text-danger color: #d9534f 

al documento CSS y luego usando

   

cambia el color a rojo. Puedes configurar el tuyo para cualquier color.

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

Simplemente puedes definir una clase en tu archivo css y ponerla en cascada en un archivo html como

  

ahora escribe en css

 .green{ color:green} 

Tuve el mismo problema cuando traté de usar los icons directamente desde BootstrapCDN (la manera 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 impresionante de la fuente), y todo comenzó a funcionar como deberían.

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

(esta respuesta se basa en esa respuesta)

(para el icono de marcador, por ejemplo 🙂

archivo inyour.css:

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

archivo inyour.html:

 

Solo tiene que apuntar al nombre predecible de la clase de la fuente-impresionante

en ex:

HTML

  

CSS

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

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

 

Para la versión de Font Awesome 5 SVG , use

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

Cambia dinámicamente las propiedades CSS de los icons .fa-xxx:

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

    Como se ha señalado, los íconos de fonts geniales son texto, por lo tanto, lo estilo con los atributos de CSS apropiados. Por ejemplo:

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

    Si, como a mí me ocurre un poco, el tamaño del icono no cambia para nada, agregue “! Important” al atributo de tamaño de fuente.

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

    No te aconsejaría que uses un estilo de fuente increíble como el fa-5x, etc. por temor a que puedan cambiarlo y tendrías que seguir presionando el código de tu aplicación para encontrar el último estándar. Simplemente evite esto dando cada tipo de fuente de clase impresionante que desea estilo uniformemente la misma clase decir:

        

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

    Luego, en tu CSS, puedes cambiar el estilo de las fonts que usan las mismas reglas CSS con las que escribirías una fuente normal. p.ej

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

    }

    Eso debería hacer que las fonts increíbles de tu estilo

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

    Color: Para Shadow: .fa-linkedin-square {text-shadow: 3px 6px # 272634; } “