css - fuentes - fontawesome io 3.2 1 icons

Cómo aplicar estilo al color, el tamaño y la sombra de los iconos de Font Awesome Icons

Question

¿Cómo podría aplicar estilo al color, tamaño y sombra de los íconos de íconos de Font Awesome?

Por ejemplo, el Icons Font Awesome mostrará algunos íconos en blanco y otros en rojo, pero no mostrará el CSS sobre cómo estilizarlos de esa manera ...

Answer 1

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>

Answer 2

Como se ha señalado, los íconos de fuente impresionante son texto, por lo tanto, se les aplica un estilo usando los atributos CSS adecuados. 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;
}

Answer 3

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>

Answer 4

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:

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

Answer 5

Dado que son simplemente fuentes, entonces deberías poder aplicarles el estilo como fuentes:

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

Answer 6

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

Answer 7

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>

Answer 8

Hay una forma realmente sencilla 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>

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 .

Answer 9

No te aconsejaría que utilices un estilo de fuente impresionante como el fa-5x, etc. por temor a que lo cambien, 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 diseñar de manera uniforme la misma clase, por ejemplo:

<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 de 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 darle un estilo a tus fuentes de fuente impresionante

Answer 10

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

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

Answer 11

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

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

Answer 12

Parece que el color del icono de 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>

Answer 13

Sólo el objetivo de fuente impresionante nombre de clase predefinido

en ex:

HTML

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

CSS

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

Answer 14

Si está utilizando 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>

Answer 15

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}

Answer 16

También puede simplemente agregar estilo en línea:

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

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

Answer 17

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 (que se describe en la "forma fácil" en la impresionante documentación de la fuente), y todo comenzó a funcionar como debían.

Answer 18

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. Puedes configurar el tuyo para cualquier color.

Answer 19

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>

Answer 20

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 usar estilos en línea en Íconos con Font Awesome funciona bien, especialmente en el caso de que nombre sus colores de forma semántica, es decir, el color de navegación si desea un color diferente para eso, etc.

En este ejemplo en su sitio web, y cómo he escrito también en mi ejemplo, la versión más reciente de Font Awesome ha cambiado ligeramente la sintaxis de ajustar el tamaño. Antes de eso 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 hayas instalado en tu entorno. Espero que esto ayude.

Answer 21

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