Можно ли изменить цвет шрифта Font Awesome?

Ответ 1

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

.icon-cog {
  color: black;
}

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

.fa-cog {
  color: black;
}

Ответ 2

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

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

Ответ 3

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

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

Ответ 4

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

.fa {
  color : red;
}

Ответ 5

Попробуйте следующее:

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

Ответ 6

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

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

Ответ 7

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

HTML:

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

CSS

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

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

Ответ 8

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

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

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

Ответ 9

.fa-search{
    color:#fff;
 }

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

Ответ 10

просто введите текст и текст, который вы хотите: D HTML:

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

Ответ 11

просто придайте ему стиль, который вам нужен, например

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

Ответ 12

Вы можете изменить цвет замечательного значка, изменив его цвет переднего плана с помощью свойства css color. Ниже приведены примеры:

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

Это поддерживает SVG также

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

Ответ 13

Если вы хотите изменить цвет определенного значка, вы можете использовать что-то вроде этого:

.fa-stop {
    color:red;
}

Ответ 14

Напишите этот код в той же строке, это изменит цвет значка:

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

Ответ 15

Вы можете изменить цвет значка Font Awesome с помощью класса начальной загрузки

использовать

text-color

пример

text-white

Ответ 16

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

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