¿Puedo cambiar el color del icono de Font Awesome?

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?

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

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;
}

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

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

Puede especificar el color en el atributo de estilo:

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

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

.fa {
  color : red;
}

Prueba esto:

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

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>

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.

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

.fa-search{
    color:#fff;
 }

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

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>

solo dale el estilo que quieras

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

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>

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">

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

.fa-stop {
    color:red;
}

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

utilizar

text-color

ejemplo

text-white

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>

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.