Чи можу я змінити колір значка шрифту Awesome?

Мені <a>чомусь доводиться загортати значок у тег.
Чи можливий спосіб змінити колір чудового піктограми на чорний?
або це неможливо, поки він загорнутий у <a>тег? Приголомшливий шрифт повинен бути шрифтом, а не зображенням, правда?

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

Це працювало для мене:

.icon-cog {
  color: black;
}

Для версій Font Awesome вище 4.7.0 вона виглядає так:

.fa-cog {
  color: black;
}

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

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

Ви можете вказати колір у атрибуті стилю:

<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класи

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

Це також підтримує svgs

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

Напишіть цей код у тому ж рядку, щоб змінити колір піктограми:

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

Якщо ви хочете змінити колір конкретної піктограми, ви можете використовувати щось подібне:

.fa-stop {
    color:red;
}

Ви можете змінити колір значка Font Awesome за допомогою класу завантаження

використання

text-color

приклад

text-white

Для мене єдине, що працювало, це inline css + overriding

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

Використання класу надасть вам властивість безкоштовного прив'язки, яку ви можете застосувати до будь-якого потрібного вам тегу.