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

264

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

введите описание изображения здесь

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
Husten
источник
2
возможный дубликат Как стилизовать цвет значка, размер и тень Font Awesome Icons
Джеймс Доннелли
1
Проверьте это: fortawesome.github.io/Font-Awesome/examples
Мохаммед Замир,

Ответы:

347

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

.icon-cog {
  color: black;
}

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

.fa-cog {
  color: black;
}
Эван Хан
источник
@Evans Спасибо, но проблема в том, что я иногда помещаю <i class = "icon-cog icon-white"> в ячейку таблицы черного цвета. Ваш css также заставил изменить его на черный :(
HUSTEN
3
Вы можете добавить следующее: .icon-cog.icon-white {color: white; }
Эван Хан
3
Просто натолкнулся на это - я обнаружил, что добавление класса 'fa' ко всем иконкам, а затем размещение .fa {color: green;}сделали свое дело. Затем вы можете сделать, .fa.icon-white {color: white;}чтобы получить тот же эффект, как вы хотите выше.
ClarkeyBoy
Можно ли поменятьbackground-color
вамсикришнаманнем
@vamsikrishnamannem Да. Вы можете добавить background-color: #112233в CSS. Проверьте этот код для примера.
Эван Хан
50

HTML:

    <i class="icon-cog blackiconcolor">

CSS:

    .blackiconcolor {color:black;}

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

JB
источник
1
Это хорошее, аккуратное решение. Я предпочитаю называть классы префиксом fa, таким как fa-black или fa-blue, просто чтобы было ясно, что я применяю их к шрифтовым значкам.
DavidHyogo
36

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

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
dandrews
источник
16
-1 Во-первых, это неправильно, потому что это также изменит цвет текста, а не только цвет иконки, как было запрошено. Во-вторых, использование встроенного CSS не должно поощряться.
Адриан Шмидт
Где в вопросе написано «только цвет иконки», а не цвет текста?
dandrews
3
Я думаю, что это довольно очевидно вытекает из того, как вопрос сформулирован. И, похоже, вы согласитесь, так как вы обновили свой ответ :)
Адриан Шмидт
2
Я хочу дать небольшую подсказку для Bootstrap. <i> пометить с помощью text-primaryкласса, переопределить цвет значка как синий. так что хорошо знать об этом.
Элия
9

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

.fa {
  color : red;
}
ChAnDu353
источник
Это хорошо, но меняет все иконки в моем проекте. Я создал классы вроде .fa-black {color: # 000;}. Затем я добавил классы fa-black к иконкам, где я хотел другого цвета.
DavidHyogo
7

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

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
Рахул Татод
источник
И где же text-red, text-blueили text-yellowпришел?
колидир
оно пришло с урока начальной загрузки
Рахул Татод
6

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

<i class="fa fa-cog" style="color:#fff;"></i>
Лазарос Пападопулос
источник
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; }

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

Адриан Шмидт
источник
3

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

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

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

Sategroup
источник
2
.fa-search{
    color:#fff;
 }

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

Stanjhae
источник
2

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

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>
Каан Ли Хыонг
источник
1

просто придать ему стиль, какой захочешь

style="color: white;font-size: 20px;"
Рахул Татод
источник
1

Вы можете изменить цвет замечательного значка, изменив его цвет переднего плана с помощью 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>

Мохаммед Шариф С
источник
1

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

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
Warner J Gaitán Guerrero
источник
0

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

.fa-stop {
    color:red;
}
Ahmad
источник
0

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

использование

text-color

пример

text-white
Afeesudheen
источник
0

Для меня единственное, что сработало, это inline css + overriding

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
взломщик
источник
-6

HTML:

<i class="icon-cog blackiconcolor">

CSS:

 .blackiconcolor {color:black;}

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

амея роте
источник
4
-1 шрифт Потрясающие значки текста, отсюда и название. Они должны быть раскрашены с использованием css, как и любой другой текст, а не с использованием специфических для продавца уловок. Кроме того, поскольку они являются текстовыми, они уже черно-белые (или одноцветные).
Адриан Шмидт
2
@AdrianSchmidt Вышеуказанный ответ для преобразования изображения в черный, я не хотел менять цвет шрифта с этим, я надеюсь, что вы меня
поняли
2
Я понимаю. Ответ все еще неверен в отношении вопроса, хотя. Font Awesome значки - это не изображения, а текст.
Адриан Шмидт