Bisakah saya mengubah warna warna ikon Font Awesome?


264

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?

masukkan deskripsi gambar di sini

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


Jawaban:


347

Ini bekerja untuk saya:

.icon-cog {
  color: black;
}

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

.fa-cog {
  color: black;
}

@Evans Terima kasih tapi masalahnya kadang-kadang saya meletakkan <i class = "icon-cog icon-white"> pada sel tabel yang berwarna hitam. Css Anda dipaksa untuk mengubahnya menjadi hitam juga :(
HUSTEN

3
Anda dapat menambahkan yang berikut ini: .icon-cog.icon-white {color: white; }
Evan Hahn

3
Baru saja menemukan ini - saya menemukan bahwa menambahkan kelas 'fa' ke semua ikon dan kemudian .fa {color: green;}melakukan triknya. Anda kemudian dapat melakukan .fa.icon-white {color: white;}untuk mendapatkan efek yang sama seperti yang Anda inginkan di atas.
ClarkeyBoy

Apakah mungkin untuk mengubahbackground-color
vamsikrishnamannem

@vamsikrishnamannem Yup. Anda dapat menambahkan background-color: #112233ke CSS. Lihatlah kode ini sebagai contoh.
Evan Hahn

50

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

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


1
Ini adalah solusi yang bagus dan rapi. Saya lebih suka memberi nama kelas dengan awalan fa seperti fa-black atau fa-blue hanya untuk memperjelas bahwa saya menerapkannya pada font ikon yang mengagumkan.
DavidHyogo

36

Anda dapat menentukan warna pada atribut style:

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

16
-1 Pertama, ini salah, karena akan mengubah warna teks juga, bukan hanya warna ikon, seperti yang diminta. Kedua, menggunakan inline css tidak boleh dipromosikan.
Adrian Schmidt

Di mana pertanyaan mengatakan "hanya warna ikon" dan bukan warna teks?
dandrews

3
Saya pikir itu agak tersirat dengan cara pertanyaan itu diungkapkan. Dan sepertinya Anda akan setuju, karena Anda memperbarui jawaban Anda :)
Adrian Schmidt

2
Saya ingin memberi sedikit petunjuk Bootstrap. <i> tag dengan menggunakan text-primarykelas, timpa warna ikon sebagai biru. jadi ada baiknya untuk menyadarinya.
elia

9

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

.fa {
  color : red;
}

Ini bagus tetapi mengubah semua ikon di proyek saya. Saya membuat kelas seperti .fa-black {color: # 000;}. Saya kemudian menambahkan kelas fa-black ke ikon di mana saya ingin warna yang berbeda.
DavidHyogo

7

Coba ini:

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

Dan dari mana text-red, text-blueatau text-yellowberasal?
colidyre

itu berasal dari kelas bootstrap
Rahul Tathod

6

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>

5

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.


3

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


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


2

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>

1

berikan saja gaya yang Anda inginkan

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

1

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>



0

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

.fa-stop {
    color:red;
}

0

Anda dapat mengubah warna ikon Font Awesome dengan kelas bootstrap

menggunakan

text-color

contoh

text-white

0

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

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


4
-1 Font Ikon yang mengagumkan adalah teks, karenanya namanya. Mereka harus diwarnai menggunakan css seperti teks lainnya, tidak menggunakan trik khusus vendor. Juga, karena mereka adalah teks, mereka sudah hitam-putih (atau mono-warna).
Adrian Schmidt

2
@AdrianSchmidt Jawaban di atas adalah untuk mengubah gambar menjadi hitam, saya tidak bermaksud mengubah warna font dengan ini, saya harap Anda
mengerti

2
Saya mengerti. Jawabannya masih salah dalam hal pertanyaan. Ikon Huruf Luar Biasa bukanlah gambar, itu adalah teks.
Adrian Schmidt
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.