По какой-то причине мне нужно поместить значок в тег <a>.
Есть ли способ изменить цвет шрифта - удивительный значок на черный?
или это невозможно, если оно завернуто в тег <a>? Шрифт awesome должен быть шрифтом, а не изображением, верно?
<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
Это сработало для меня:
.icon-cog {
color: black;
}
Для версий шрифта Awesome выше 4.7.0 он выглядит так:
.fa-cog {
color: black;
}
HTML:
<i class="icon-cog blackiconcolor">
css:
.blackiconcolor {color:black;}
вы также можете добавить дополнительный класс к значку кнопки...
Вы можете указать цвет в атрибуте style:
<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
Чтобы изменить шрифт, отличный цвет значков для всего проекта, используйте это в своем CSS
.fa {
color : red;
}
Попробуйте следующее:
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
Если вы не хотите изменять файл CSS, это то, что работает для меня. В HTML добавьте стиль с цветом:
<i class="fa fa-cog" style="color:#fff;"></i>
Чтобы нажимать только такие значки на этой кнопке, вы можете дать кнопке класс и установить цвет значка только в том случае, если внутри кнопки.
HTML:
<a class="my-nice-button" href="/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS
.my-nice-button>i { color: black; }
Это сделает любой значок, который является прямым потомком вашей кнопки, черный.
Что касается ответа @ClarkeyBoy, ниже код работает нормально, если используется последняя версия значков Font-Awesome или если вы используете fa classes
.fa.icon-white {
color: white;
}
И затем добавьте icon-white в существующий класс
.fa-search{
color:#fff;
}
вы пишете этот код в css, и он изменит цвет на белый или любой цвет, который вы хотите, вы указываете его
просто введите текст и текст, который вы хотите: D HTML:
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
<span style="color:black;">Text Name</span>
</a>
просто придайте ему стиль, который вам нужен, например
style="color: white;font-size: 20px;"
Вы можете изменить цвет замечательного значка, изменив его цвет переднего плана с помощью свойства 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>
Если вы хотите изменить цвет определенного значка, вы можете использовать что-то вроде этого:
.fa-stop {
color:red;
}
Напишите этот код в той же строке, это изменит цвет значка:
<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
Вы можете изменить цвет значка Font Awesome с помощью класса начальной загрузки
использовать
text-color
пример
text-white
HTML:
<i class="icon-cog blackiconcolor">
css:
.blackiconcolor {color:black;}
Использование класса даст вам свободное свойство привязки, которое вы можете применить к любому тэгу, который вам нужен.