Cara memberi style pada ikon warna, ukuran, dan bayangan dari Font Awesome Icons

Jawaban:

466

Mengingat bahwa itu hanyalah font, maka Anda harus dapat men-style-nya sebagai font:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
David mengatakan mengembalikan Monica
sumber
4
@ David Thomas: Itu solusi yang bagus. Terima kasih telah memposting itu. Namun, saya MASIH bingung mengapa font-awesome kadang-kadang menunjukkan ikon putih dan kadang-kadang hitam. Apa Triknya? Seperti yang ditunjukkan oleh GirlCanCode2, contoh-contoh di situs web FA menunjukkan ikon & teks hitam putih. . . Namun, memeriksa elemen-elemen di Firebug, CSS untuk ikon-ikon tertentu (misalnya, ikon-info) ditulis [menjadi] putih. Apakah itu yang harus kita lakukan? Tidak ada opsi ikon-putih seperti di bootstrap.css?
Ace
1
untuk mengubah warna, periksa ini dalam SO, semoga membantu seseorang
shaijut
@Ace Saya tahu ini sudah tua dan Anda mungkin telah mempelajari ini sekarang tetapi untuk orang lain juga yang memiliki pertanyaan, Anda mungkin ingin melihat kekhususan di sini dan juga di sini . Hal lain yang perlu diketahui adalah kaskade CSS; misalnya style dan stylesheet yang muncul setelah yang lain diterapkan sebagai gantinya kecuali penyeleksi aturan gaya mereka kurang spesifik (seperti dalam spesifisitas). Jadi, latihan favorit saya adalah untuk minimal pertandingan dan menempatkan gaya setelah untuk menimpanya.
John
158

Anda juga bisa menambahkan style inline:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>
dandrews
sumber
7
Terlepas dari suara elitis turun, jawaban ini berfungsi dengan baik. Karena font yang mengagumkan adalah font yang merespons gaya dan kelas yang memengaruhi teks.
AaronLS
16
@NightOwl Ini juga praktik terbaik untuk menggunakan minifikasi, bundling, dan cache sumber daya ini. Tidak ada jawaban di sini yang menunjukkan hal-hal itu, dan untuk mencoba dan menegakkan praktik terbaik diikuti dalam konteks jawaban yang terisolasi adalah IMO elitis. Siapa pun yang mengerti CSS harus bisa mengambil gaya itu dan memindahkannya ke kelas CSS.
AaronLS
4
@NightOwl Bahkan jawaban dengan suara tertinggi cukup buruk dalam hal praktik terbaik. Anda seharusnya tidak membuat gaya dalam file CSS bersama yang mereferensikan elemen oleh #id, karena hanya satu elemen yang dapat berlangganan gaya itu di setiap halaman. Jika saya menurunkannya karena alasan itu, bukankah saya akan cukup elitis? Kedua penjawab membuat upaya yang efektif untuk memberikan informasi yang berguna kepada penanya, dan saya tidak berpikir mereka harus diturunkan ketika jawaban mereka memang efektif.
AaronLS
31
Jika seseorang ingin mengajukan jawaban dengan komentar yang mengindikasikan bahwa umumnya merupakan praktik terbaik untuk tidak menggunakan gaya sebaris, maka itu akan sesuai. Sebuah jawaban yang efektif dan informatif tidak boleh diremehkan atas hal-hal sepele seperti itu ketika seseorang bisa dengan mudah meningkatkan nilai jawaban yang ada dengan menambahkan komentar.
AaronLS
1
Bagi saya tidak masuk akal untuk menempatkan arahan css warna sederhana ke dalam kelasnya sendiri dan bundel dengan aset css Anda. Apa yang akan kamu lakukan? class='icon-ok-sign my-red-class'? atau class='icon-ok-sign-red'? Itu membuatnya kurang mudah dibaca dan menambah tingkat kompleksitas yang tidak berguna.
nurettin
114

Jika Anda menggunakan Bootstrap secara bersamaan, Anda dapat menggunakan:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

Jika tidak:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
Qian Chen
sumber
1
Tentunya solusi untuk pertanyaan tidak melibatkan penggunaan bootstrap
JG Estiot
1
Mungkin tidak memerlukan bootstrap, tetapi itulah bagaimana saya menemukan pertanyaan ini. Elgs terima kasih!
Will Lovett
1
Anda dapat melihat dari tangkapan layar bahwa mereka sudah menggunakan bootstrap. Masuk akal untuk terus menggunakannya untuk mempertahankan palet warna yang sama dan bukan duplikat kode.
Simon Luijk
halus tetapi penting: teks-sukses adalah warna teks, bukan warna tombol untuk btn-sukses. Jadi jika Anda ingin ikon terlihat seperti "tombol datar", maka kesuksesan teks akan sedikit berbeda. Saya menemukan ini paling jelas dalam peringatan teks, karena itu adalah kuning jelek yang bertentangan dengan oranye yang sangat terlihat
Josh Petitt
44

Sepertinya warna ikon FontAwesome merespons info teks, kesalahan teks, dll.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
pengguna1695595
sumber
8
Untuk Bootstrap, <i class = "fa fa-warning text-hazard"> </i>
Mastro
Ini mungkin jawaban terbaik di halaman ini, setidaknya bagi saya, karena saya sudah menggunakan Bootstrap dan ini cocok dengan paradigma itu.
Jake Toronto
17

file inyour.css:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

file inyour.html:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
gingin
sumber
13

Ada cara yang sangat sederhana untuk mengubah warna ikon Font Awesome. 

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>
Luaskan cuplikan

Anda dapat mengubah kode hex ke preferensi Anda. CATATAN: Warna teks akan mengubah warna ikon juga kecuali ada style="color:#00cc6a"di dalam itag.

Calum Childs
sumber
9

Menggunakan FA 4.4.0 menambahkan

.text-danger
    color: #d9534f

ke css dokumen dan kemudian gunakan 

 <i class="fa fa-ban text-danger"></i>

mengubah warna menjadi merah. Anda dapat mengatur sendiri warna apa saja.

Steve Gutierrez
sumber
9 
For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
arif imtiaz
sumber
8

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

Di sini saya telah mendefinisikan gaya global dalam CSS saya di mana warna utama adalah kelas, dalam kasus saya itu adalah warna biru muda. Saya menemukan bahwa menggunakan gaya inline pada Ikon dengan Font Awesome berfungsi dengan baik, terutama dalam kasus ketika Anda memberi nama warna Anda secara semantik, yaitu nav-color jika Anda ingin warna yang terpisah untuk itu, dll.

Dalam contoh ini di situs web mereka, dan bagaimana saya telah menulis dalam contoh saya juga, versi terbaru dari Font Awesome telah sedikit mengubah sintaks menyesuaikan ukuran. Sebelum itu sebelumnya:

icon-xxlarge

di mana sekarang saya harus menggunakan:

icon-3x

Tentu saja, ini semua tergantung pada versi Font Awesome apa yang telah Anda instal di lingkungan Anda. Semoga ini membantu.

kinghenry14
sumber
7

Di FontAwesome 4.0, kelas berubah menjadi 'fa-2x', 'fa-3x'.

angelokh
sumber
7

Cukup Anda dapat mendefinisikan kelas dalam file css Anda dan mengubahnya menjadi file html seperti 

<i class="fa fa-plus fa-lg green"></i>

sekarang tulis dalam css 

.green{ color:green}
gdmanandamohon
sumber
6

Hanya menargetkan nama kelas standar font-mengagumkan

misalnya:

HTML

<i class="fa fa-facebook"></i>

CSS

i.fa {
    color: red;
    font-size: 30px;
}
Jonca33
sumber
5

Silakan merujuk ke tautan http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Brandon Yang
sumber
4

Saya memiliki masalah yang sama ketika saya mencoba menggunakan ikon langsung dari BootstrapCDN (cara termudah). Kemudian saya mengunduh file CSS dan menyalinnya ke folder CSS situs saya, file CSS (Dijelaskan di bawah 'cara mudah' dalam dokumentasi font yang mengagumkan), dan semuanya mulai berfungsi sebagaimana mestinya.

Thanushka
sumber
3

Bungkus tag i dalam p atau span, maka Anda dapat menggunakan bootstrap css class

<p class="text-success"><i class="fa fa-check"></i></p>
etlds
sumber
2

Untuk Font Awesome 5 versi SVG , gunakan

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
czLukasss
sumber
1

Seperti yang telah ditunjukkan, ikon font yang mengagumkan adalah teks, akibatnya Anda gaya itu menggunakan atribut CSS yang sesuai. Sebagai contoh:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

Jika, seperti yang terjadi pada saya, ukuran ikon tidak berubah sama sekali, tambahkan "! Penting" ke atribut ukuran font.

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}
gmartinss
sumber
1

Untuk Ukuran Ikon

Kerangka kerja Web Font + CSS dan SVG + JS kami mencakup beberapa kontrol dasar untuk menentukan ukuran ikon dalam konteks UI halaman Anda.

Anda bisa menggunakan like

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

TarangP
sumber
0

Secara dinamis mengubah properti css dari ikon .fa-xxx:

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>
yardpenalty.com
sumber
0 
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
Dan Alboteanu
sumber
0

Saya tidak akan menyarankan Anda untuk menggunakan gaya font-mengagumkan seperti fa-5x dll; karena khawatir mereka mungkin mengubahnya dan Anda harus tetap menggunakan kode aplikasi Anda untuk memenuhi standar terbaru. Anda cukup menghindari ini dengan memberikan setiap kelas font-mengagumkan yang Anda ingin gaya seragam kelas yang sama mengatakan:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

Di sini kelasnya adalah fa-sabi-social-icons

Kemudian di css Anda, Anda bisa gaya font menggunakan aturan css yang sama Anda akan gaya dengan font normal. misalnya

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

Itu akan membuat font-font Anda luar biasa

kboul
sumber