Cara Membalik / Skala / Tebal dan Gaya Ikon Fontawesome Anda

Jadi aplikasi Anda menggunakan ikon Fontawesome tetapi mereka terlihat seperti setiap aplikasi lainnya dan Anda memerlukan sesuatu yang lebih khusus. Saya berada di kapal yang sama dan menghabiskan waktu meneliti bagaimana membuat tampilan saya sendiri. Berikut adalah beberapa metode yang saya temukan untuk membalik, memutar, menskalakan, menebalkan, menskalakan, mewarnai, dan sebaliknya menjadikan ikon Fontawesome Anda lebih seperti Anda. Beberapa kelas yang didukung dari Fontawesome dan beberapa adalah CSS.

Membalik

Fontawesome telah membangun dukungan untuk kebutuhan membalik umum melalui dua kelas:

fa-flip- * (opsi: horisontal, vertikal)
 
 

Memutar

Sama untuk memutar dan arah mata angin:

fa-rotate- * (opsi: 90, 180, 270)
 
 
 

Lebih besar

Fontawesome juga telah Anda liput jika Anda ingin memperbesar ikon Anda untuk membuatnya lebih besar. Cukup tambahkan kelas yang didukung untuk ukuran standar besar, 2x, 3x, 4x, dan 5x:

fa- * (opsi: lg, 2x, 3x, 4x, 5x)
  fa-lg
  fa-2x
  fa-3x
  fa-4x
  fa-5x

Lebih kecil

Tetapi bagaimana jika Anda perlu memperkecil ikon agar sesuai dengan tata letak, formulir, atau hamparan ke ikon lainnya? Fontawesome tidak menawarkan kelas untuk itu. Namun karena ikon ditampilkan sebagai font, Anda dapat menambahkan CSS yang biasa Anda gunakan untuk skala font untuk skala ikon:

Cukup buat kelas CSS (dengan tingkat kekhususan apa pun yang Anda perlukan untuk meraih ikon / tautan) dan targetkan itu ke pemilih ikon:

.fa-search {
  ukuran font: 0,5em;
}
 

Fontawesome sepatutnya peduli tentang aksesibilitas. Dugaan saya di sini adalah bahwa apa pun yang kurang dari ukuran standar dapat menyebabkan masalah bagi beberapa pengguna dan hanya boleh digunakan untuk item desain yang tidak penting daripada UX kritis.

Warna

Cukup gunakan CSS khusus di kelas dan Anda siap melanjutkan. Di sini kami menerapkan ukuran font dan warna pada ikon membalik secara horizontal sebagai contoh:

.fa-search {
  ukuran font: 3.0em;
  warna biru;
}
 

Anda tentu saja dapat menerapkan efek hover biasa untuk menghasilkan perubahan warna dan penskalaan pada hover sehingga ikon Anda muncul.

Bold / Light

Di sinilah kita membelok keluar dari jalan dan hal-hal mulai mendapatkan sedikit hacky. Sampai sekarang, kami telah menggunakan (1) kelas yang disediakan Fontawesome (2) gaya font standar dari CSS. Sekarang kita akan menggunakan beberapa efek font yang kurang kompatibel dengan browser untuk menambahkan beberapa penyesuaian tambahan. Bahkan, pada Juli 2016 ini adalah bagan kompatibilitas untuk stylings di bawah ini yang semuanya menggunakan -webkit-text-stroke:

Tidak mengherankan, tidak ada IE. Sekarang, lanjutkan dengan itu!

Fontawesome tidak memiliki kelas yang berani. Dan Anda tidak akan berpikir Anda akan membutuhkannya. Tetapi saya mendapati diri saya ingin mencocokkan lebar goresan pada beberapa ikon yang dibelai berbeda untuk membuat mereka terkoordinasi sedikit lebih baik. Anda mungkin juga ingin melakukan ini untuk mengoordinasikan teks yang berdekatan yang memiliki stroke lebih tebal atau lebih tipis dari ikon Fontawesome Anda.

Di atas berlaku stroke warna latar belakang untuk membuat ikon tipis atau stroke warna font untuk membuat ikon tebal.

.fa-search {
  -webkit-text-stroke: 2px putih; /* warna latar belakang */
  warna biru;
}
.fa-search {
  -webkit-text-stroke: 3px blue; /* warna huruf */
  warna biru;
}

Garis besar

Anda bahkan dapat menggabungkan goresan dan isi untuk mendapatkan garis besar atau efek warna ganda:

.fa-search {
  -webkit-text-stroke: 2px biru;
  -webkit-text-fill-color: cyan;
}

Hanya ingat sekali lagi bahwa ini tidak akan membuat Anda lintas kompatibilitas browser. (Saya bilang Anda bisa melakukan eksperimen dengan bayangan teks di IE untuk mempercepat seluruh aplikasi Anda ...)

Itu dia!

Dengan bantuan kelas bawaan Fontawesome dan CSS khusus Anda sendiri, Anda siap membuat ikon Anda muncul.