Cómo diseñar el color, el tamaño y la sombra de los íconos Font Awesome

Respuestas:

466

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

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
— David dice que reinstale a Mónica
fuente
44
@David Thomas: Esa es una buena solución. Gracias por publicar eso. Sin embargo, todavía estoy desconcertado por qué la fuente impresionante a veces muestra iconos en blanco y otras en negro. ¿Cuál es el truco? Como señaló GirlCanCode2, los ejemplos en el sitio web de FA muestran íconos y texto en blanco y negro. . . Sin embargo, al examinar los elementos en Firebug, el CSS para iconos específicos (p. ej., icon-info) se [sobre] escribe en blanco. ¿Es eso realmente lo que tenemos que hacer? ¿Ninguna opción de icono blanco como en bootstrap.css?
— As
1
para cambiar el color, verifique esto en SO, la esperanza ayuda a alguien
— shaijut
@Ace Sé que esto es viejo y es posible que ya lo hayas aprendido, pero también para otros que tengan la pregunta, es posible que desees analizar la especificidad aquí y también aquí . La otra cosa que debes saber es la cascada CSS; por ejemplo, los estilos y las hojas de estilo que vienen después de otros se aplican a menos que sus selectores de reglas de estilo sean menos específicos (como en la especificidad). Por lo tanto, mi práctica favorita es al menos una especificación de coincidencia y poner estilo después de anular.
— Juan
158

También puede agregar estilo en línea:

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

<i class="icon-warning-sign" style="color:red"></i>
— Dandrews
fuente
77
A pesar de los votos elitistas, esta respuesta funciona bien. Debido a que Font Awesome es una fuente, responde a estilos y clases que afectan el texto.
— AaronLS
16
@NightOwl También es una buena práctica utilizar minificación, agrupación y almacenamiento en caché de estos recursos. Ninguna de las respuestas aquí demuestra ninguna de esas cosas, y tratar de hacer cumplir las mejores prácticas en el contexto de una respuesta aislada es elitista de la OMI. Cualquiera que entienda CSS debería poder tomar ese estilo y moverlo a una clase CSS.
— AaronLS
44
@NightOwl Incluso la respuesta más votada es bastante terrible en términos de mejores prácticas. No debería crear estilos en archivos CSS compartidos que hagan referencia a elementos por #id, ya que solo un elemento podría suscribirse a ese estilo en cada página. Si lo rechazara por esa razón, ¿no sería bastante elitista? Ambos respondedores hicieron un esfuerzo efectivo para proporcionar información útil al autor de la pregunta, y no creo que deba ser rechazado cuando su respuesta sea realmente efectiva.
— AaronLS
31
Si alguien quiere complementar la respuesta con un comentario que indique que generalmente es una buena práctica no utilizar estilos en línea, entonces eso sería apropiado. Una respuesta efectiva e informativa no debería ser rechazada sobre tales trivialidades cuando alguien simplemente podría haber mejorado el valor existente de la respuesta agregando un comentario.
— AaronLS
1
Para mí no tiene sentido colocar una simple directiva de color CSS en su propia clase y agruparla con sus activos CSS. ¿Qué harás? class='icon-ok-sign my-red-class'? o class='icon-ok-sign-red'? Eso lo hace menos legible y agrega un nivel inútil de complejidad.
— nurettin
114

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

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

De otra manera:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
— Qian Chen
fuente
1
Seguramente la solución a la pregunta no implica usar bootstrap
— JG Estiot
1
Puede que no requiera bootstrap, pero así es como encontré esta pregunta. Gracias Elgs!
— Will Lovett
1
Puedes ver en la captura de pantalla que ya están usando bootstrap. Tendría sentido continuar usándolo para mantener la misma paleta de colores y no duplicar el código.
— Simon Luijk
sutil pero importante: el éxito del texto es el color del texto, no el color de la cara del botón para btn-success. Entonces, si desea que un ícono se vea como un "botón plano", entonces el éxito del texto será ligeramente diferente. Creo que esto es más evidente en la advertencia de texto, ya que es un amarillo feo en lugar de un naranja muy visible
— Josh Petitt
44

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

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
— usuario1695595
fuente
8
Para Bootstrap, <i class = "fa fa-warning text-danger"> </i>
— Mastro
Esta es probablemente la mejor respuesta en esta página, al menos para mí, ya que ya estoy usando Bootstrap y esto encaja con ese paradigma.
— Jake Toronto
17

archivo inyour.css:

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

archivo inyour.html:

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

Hay una forma muy simple de cambiar el color de los iconos de 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>
Expandir fragmento

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 una style="color:#00cc6a"dentro de la ietiqueta.

— Calum Childs
fuente
9

Usando la adición de FA 4.4.0

.text-danger
    color: #d9534f

al documento CSS y luego usando 

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

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

— Steve Gutierrez
fuente
9 
For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
— arif imtiaz
fuente
8

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 el color principal 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 Font Awesome funciona bien, especialmente en el caso cuando nombra 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 también como he escrito en mi ejemplo, la versión más reciente de Font Awesome ha cambiado ligeramente la sintaxis de 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.

— kinghenry14
fuente
7

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

— angelokh
fuente
7

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

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

ahora escribe en css 

.green{ color:green}
— gdmanandamohon
fuente
6

Solo apunte el nombre de clase predefinido de font-awesome

en ex:

HTML

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

CSS

i.fa {
    color: red;
    font-size: 30px;
}
— Jonca33
fuente
5

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>
— Brandon Yang
fuente
4

Tuve el mismo problema cuando intenté usar los íconos 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 bajo la 'manera fácil' en la impresionante fuente de documentación), y todo comenzó a funcionar como deberían.

— Thanushka
fuente
3

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

<p class="text-success"><i class="fa fa-check"></i></p>
— etlds
fuente
2

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

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
— czLukasss
fuente
1

Como se ha señalado, los íconos impresionantes de la fuente son texto, por lo tanto, lo diseña usando 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 "! Important" al atributo de tamaño de fuente.

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

Para dimensionar iconos

Nuestros marcos Web Fonts + CSS y SVG + JS incluyen algunos controles básicos para dimensionar iconos en el contexto de la interfaz de usuario de su página.

puedes usar como

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

— TarangP
fuente
0

Cambie dinámicamente las propiedades css de los iconos .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>
— yardpenalty.com
fuente
0

No le recomendaría que utilice un estilo de fuente impresionante como el fa-5x, etc. por miedo a que lo cambien y tendrías que seguir cambiando el código de tu aplicación para cumplir con el último estándar. Simplemente evite esto dando a cada clase de fuente impresionante que desea un estilo uniforme la misma clase 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>

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

Luego, en su CSS, puede diseñar las fuentes utilizando las mismas reglas CSS con las que diseñaría 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 tus fuentes sean impresionantes

— kboul
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.