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

Question

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

Я должен обернуть свой значок в <a> тег по какой-то причине.

Есть ли какой-либо возможный способ изменить цвет шрифта-удивительный значок на черный?

или это невозможно, пока он завернут в <a> тег? Шрифт awesome должен быть шрифтом, а не изображением, верно?

enter image description here

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

740 12

html css font-awesome

12 ответов:

Comments

Ничего не найдено.

Evan Hahn · Accepted Answer · 2018-07-19 22:37:43

это сработало для меня:
.icon-cog {
  color: black;
}
для версий шрифта Awesome выше 4.7.0, это выглядит так:
.fa-cog {
  color: black;
}

J.B. · Accepted Answer · 2013-12-01 21:27:04

HTML:
 
css:
 .blackiconcolor {color:black;}
вы также можете добавить дополнительный класс к значку кнопки...

dandrews · Accepted Answer · 2015-08-19 16:33:21

вы можете указать цвет в атрибуте style:
<a href="/users/edit"> Edit profile</a>

Rahul Tathod · Accepted Answer · 2016-03-25 08:59:08

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

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

ChAnDu353 · Accepted Answer · 2017-02-23 04:57:33

чтобы изменить цвет значков шрифта awesome для всего вашего проекта, используйте это в своем css
.fa {
  color : red;
}

Adrian Schmidt · Accepted Answer · 2013-09-06 18:37:33

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

HTML:
<a class="my-nice-button" href="/users/edit">
 
 Edit profile
</a>
CSS:
.my-nice-button>i { color: black; }
это сделает любой значок, который является прямым потомком вашей кнопки черного цвета.

Sategroup · Accepted Answer · 2016-03-27 09:05:54

со ссылкой на @ ClarkeyBoy ответ, ниже код работает нормально, если используется последняя версия Font-Awesome иконки или если вы используете fa классы
.fa.icon-white {
    color: white;
}
и, затем добавить icon-white к существующему классу

Lazaros Papadopoulos · Accepted Answer · 2017-09-09 00:05:49

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

Ceejae · Accepted Answer · 2015-07-15 04:13:21

.fa-search{
    color:#fff;
 }
вы пишете этот код в css, и он изменит цвет на белый или любой цвет, который вы хотите, вы указываете его

Rahul Tathod · Accepted Answer · 2016-09-16 09:24:14

просто дать ему стиль, что вы хотите, как
style="color: white;font-size: 20px;"

Qaan Lee Hoong · Accepted Answer · 2017-09-28 22:00:39

просто дайте и стиль текста, что вы хотите, как :D HTML:
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
 Text Name
</a>

ameya rote · Accepted Answer · 2016-11-10 14:02:54

HTML:

css:
 .blackiconcolor {color:black;}
использование класса даст вам бесплатное свойство привязки, которое вы можете применить к любому тегу, который вам нужен.