Могу ли я изменить цвет значка Font Awesome?

Я должен обернуть свой значок в <a> тег по какой-то причине.
Есть ли какой-либо способ изменить цвет шрифта-удивительный значок на черный?
или это невозможно, пока он завернут в <a> тег? Шрифт awesome должен быть шрифтом, а не изображением, верно?

enter image description here

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
197
css font-awesome html

12 ответов

это сработало для меня:

.icon-cog {
  color: black;
}

для версий шрифта Awesome выше 4.7.0, это выглядит так:

.fa-cog {
  color: black;
}
273

HTML-код:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

вы также можете добавить дополнительный класс к значку кнопки...

36

вы можете указать цвет в атрибуте style:

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

попробуйте это:

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

чтобы изменить цвет значков шрифта awesome для всего вашего проекта, используйте это в своем css

.fa {
  color : red;
}
5

чтобы поразить только cog-значки в такой кнопке, вы можете дать кнопке Класс и установить цвет значка только внутри кнопки.

HTML-код:

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

CSS:

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

это сделает любой значок, который является прямым потомком вашей кнопки черным.

4

со ссылкой на @ClarkeyBoy ответ, ниже код работает нормально, если используется последняя версия Font-Awesome иконки или если вы используете fa классы

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

и, затем добавить icon-white к существующему классу

3

Если вы не хотите изменять файл CSS, это то, что работает для меня. В HTML добавьте стиль с цветом:

<i class="fa fa-cog style="color:#fff;"></i>
3
.fa-search{
    color:#fff;
 }

вы пишете этот код в css, и он изменит цвет на белый или любой цвет, который вы хотите, вы указываете его

2

просто дать ему стиль, что вы хотите, как

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

просто дайте и стиль текста, что вы хотите, как :D HTML-код:

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

HTML-код:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

использование класса даст вам бесплатное свойство привязки, которое вы можете применить к любому тегу, который вам нужен.

-7