html - color - font awesome error

¿Puedo cambiar el color del color del icono de Font Awesome?

Question

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

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

Answer 1

Con referencia a la respuesta de @ClarkeyBoy, el código siguiente funciona bien, si usa la última versión de Font-Awesome íconos de Font-Awesome o si usa las clases fa

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

Y, a continuación, agregue el icon-white a la clase existente

Answer 2

Esto funcionó para mí:

.icon-cog {
  color: black;
}

Para versiones de Font Awesome por encima de 4.7.0 , se ve esto:

.fa-cog {
  color: black;
}

Answer 3

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

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

Answer 4

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

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

Answer 5

Para cambiar el color de los íconos asombrosos de la fuente para su proyecto completo, use esto en su css

.fa {
  color : red;
}

Answer 6

Para presionar solo los iconos-cog en ese tipo de botón, puede asignar 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.

Answer 7

Prueba esto:

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

Answer 8

Puede especificar el color en el atributo de estilo:

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

Answer 9

Si no quieres 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>

Answer 10

Solo dale el estilo que quieras como

style="color: white;font-size: 20px;"

Answer 11

solo dale un estilo de texto como quieras: D HTML:

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

Answer 12

.fa-search{
    color:#fff;
 }

escribe ese código en css y cambiaría el color a blanco o al color que quieras, lo especificas