Bisakah saya mengubah warna warna ikon Font Awesome?

Saya harus membungkus ikon saya di dalam <a>tag untuk beberapa alasan.
Apakah ada cara yang mungkin untuk mengubah warna ikon font-mengagumkan menjadi hitam?
atau mungkinkah asalkan dibungkus dengan <a>tag? Font yang mengagumkan seharusnya font bukan gambar, kan?

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

Ini bekerja untuk saya:

.icon-cog {
  color: black;
}

Untuk versi Font Awesome di atas 4.7.0 , tampilannya seperti ini:

.fa-cog {
  color: black;
}

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

Anda juga dapat menambahkan kelas tambahan ke ikon tombol ...

Anda dapat menentukan warna pada atribut style:

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

Untuk mengubah warna ikon ikon yang mengagumkan untuk seluruh proyek Anda gunakan ini di css Anda

.fa {
  color : red;
}

Coba ini:

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

Jika Anda tidak ingin mengubah file CSS, inilah yang berfungsi untuk saya. Dalam HTML, tambahkan gaya dengan warna:

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

Untuk menekan hanya ikon-roda gigi di tombol semacam itu, Anda dapat memberikan kelas tombol, dan mengatur warna untuk ikon hanya ketika di dalam tombol.

HTML:

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

CSS:

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

Ini akan membuat ikon apa pun yang merupakan turunan langsung dari tombol Anda menjadi hitam.

Dengan mengacu pada jawaban @ClarkeyBoy, kode di bawah ini berfungsi dengan baik, jika menggunakan Font-Awesomeikon versi terbaru atau jika Anda menggunakan fakelas

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

Dan, kemudian tambahkan icon-whiteke kelas yang ada

.fa-search{
    color:#fff;
 }

Anda menulis kode dalam css dan itu akan mengubah warna menjadi putih atau warna apa pun yang Anda inginkan, Anda menentukannya

cukup beri dan gaya teks apa pun yang Anda suka: D HTML:

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

berikan saja gaya yang Anda inginkan

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

Anda dapat mengubah warna ikon fontawesome dengan mengubah warna foreground menggunakan css colorproperti . Berikut ini adalah contohnya:

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

Ini juga mendukung 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>

Tulis kode ini di baris yang sama, ini ubah warna ikon:

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

Jika Anda ingin mengubah warna ikon tertentu, Anda dapat menggunakan sesuatu seperti ini:

.fa-stop {
    color:red;
}

Anda dapat mengubah warna ikon Font Awesome dengan kelas bootstrap

menggunakan

text-color

contoh

text-white

Bagi saya satu-satunya hal yang berhasil adalah 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;}

Menggunakan kelas akan memberi Anda properti mengikat gratis yang dapat Anda terapkan pada tag apa pun yang Anda butuhkan.