¿Puedo cambiar el color del icono de Font Awesome?


264

Tengo que envolver mi ícono dentro de una <a>etiqueta por alguna razón.
¿Hay alguna forma posible de cambiar el color de un icono de fuente impresionante a negro?
o es imposible siempre y cuando esté envuelto dentro de una <a>etiqueta? Se supone que Font Awesome es fuente, no imagen, ¿verdad?

ingrese la descripción de la imagen aquí

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>


Respuestas:


347

Esto funcionó para mí:

.icon-cog {
  color: black;
}

Para las versiones de Font Awesome anteriores a 4.7.0 , se ve así:

.fa-cog {
  color: black;
}

@Evans Gracias, pero el problema es que alguna vez puse <i class = "icon-cog icon-white"> en la celda de la tabla que es de color negro. Su CSS forzado a cambiarlo a negro también :(
HUSTEN

3
Puede agregar lo siguiente: .icon-cog.icon-white {color: white; }
Evan Hahn

3
Acabo de encontrar esto: descubrí que agregar una clase de 'fa' a todos los íconos y luego ponerlo .fa {color: green;}funcionó. Luego puede hacer .fa.icon-white {color: white;}para obtener el mismo efecto que desea arriba.
ClarkeyBoy

¿Es posible cambiarbackground-color
Vamsikrishnamannem

@vamsikrishnamannem Sí. Puedes agregar background-color: #112233al CSS. Mira este código para ver un ejemplo.
Evan Hahn

50

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

También puede agregar clase adicional al icono del botón ...


1
Esta es una buena solución ordenada. Prefiero nombrar clases con un prefijo fa como fa-black o fa-blue solo para dejar en claro que las estoy aplicando a íconos increíbles de fuentes.
DavidHyogo

36

Puede especificar el color en el atributo de estilo:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>

16
-1 En primer lugar, esto está mal, porque también cambiará el color del texto, no solo el color del icono, según lo solicitado. En segundo lugar, no se debe promover el uso de CSS en línea.
Adrian Schmidt

¿Dónde dice la pregunta "solo el color del icono" y no el color del texto?
Dandrews

3
Creo que eso está bastante implícito en la forma en que se formula la pregunta. Y parece que estaría de acuerdo, ya que actualizó su respuesta :)
Adrian Schmidt

2
Quiero dar una pequeña pista para Bootstrap. <i> etiqueta con el uso de la text-primaryclase, anular el color del icono como azul. así que es bueno ser consciente de ello.
elia

9

Para cambiar el color de los iconos de la fuente impresionante para todo su proyecto, use esto en su CSS

.fa {
  color : red;
}

Esto es bueno pero cambia todos los íconos en mi proyecto. Creé clases como .fa-black {color: # 000;}. Luego agregué las clases fa-black a los íconos donde quería un color diferente.
DavidHyogo

7

Prueba esto:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">

Y ¿de dónde viene text-red, text-blueo text-yellowvienen?
colidyre

viene de clases de bootstrap
Rahul Tathod

6

Si no desea alterar el archivo CSS, esto es lo que funciona para mí. En HTML, agregue estilo con color:

<i class="fa fa-cog" style="color:#fff;"></i>

5

Para presionar solo los iconos de engranaje en ese tipo de botón, puede darle una clase al botón y establecer el color del icono solo cuando está dentro del botón.

HTML:

<a class="my-nice-button" href="/users/edit">
    <i class="icon-cog"></i>
    Edit profile
</a>

CSS:

.my-nice-button>i { color: black; }

Esto hará que cualquier icono que sea un descendiente directo de su botón sea negro.


3

Con referencia a la respuesta @ClarkeyBoy, el siguiente código funciona bien, si usa la última versión de Font-Awesomeiconos o si usa faclases

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

Y luego agregar icon-whitea la clase existente


2
.fa-search{
    color:#fff;
 }

escribe ese código en css y cambiaría el color a blanco o cualquier color que desee, lo especifica


2

solo dale y dale estilo al texto como quieras: D HTML:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>


1

Usted puede cambiar el color de un icono fontawesome por cambiar su color de primer plano usando la css colorpropiedad . Los siguientes son ejemplos:

<i class="fa fa-cog" style="color:white">

Esto también admite svgs

<style>
.fa-cog{
color:white;
}
</style>

<style>
.parent svg, .parent i{
color:white
}
</style>

<div class="parent">
  <i class="fa fa-cog" style="color:white">
</div>


1

Escriba este código en la misma línea, esto cambia el color del icono:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">

0

Si desea cambiar el color de un icono específico, puede usar algo como esto:

.fa-stop {
    color:red;
}

0

Puede cambiar el color del icono de Font Awesome con la clase bootstrap

utilizar

text-color

ejemplo

text-white

0

Para mí, lo único que funcionó es css en línea + anulación

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>

-6

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

El uso de la clase le dará una propiedad de enlace gratuita que puede aplicar en cualquier etiqueta que necesite.


44
-1 Los iconos de Font Awesome son texto, de ahí el nombre. Deben colorearse usando CSS como cualquier otro texto, no usando trucos específicos del proveedor. Además, dado que son texto, ya son en blanco y negro (o monocolor).
Adrian Schmidt

2
@AdrianSchmidt La respuesta indicada anteriormente es para convertir una imagen a negro, no quise cambiar el color de la fuente con esto, espero que me
entiendas

2
Entiendo. Sin embargo, la respuesta sigue siendo incorrecta con respecto a la pregunta. Los iconos de Font Awesome no son imágenes, son texto.
Adrian Schmidt
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.