Panduan untuk Ikon UI yang Lebih Baik dan Lebih Tajam dengan Font Web

Jika Anda terbiasa menggunakan format gambar bitmap (seperti PNG dan GIF) untuk menampilkan ikon di situs web, maka Anda juga akan terbiasa dengan kekurangannya. Pertama-tama, tergantung pada dimensi dan berapa banyak informasi warna yang dimiliki ikon, ukuran file ikon bisa sangat besar.

Jika kita memiliki terlalu banyak ikon untuk dimasukkan ke situs web, itu juga berpotensi memperlambat kinerja situs web karena banyak permintaan HTTP harus dilakukan oleh browser. Meskipun masalah ini dapat diselesaikan dengan sprite CSS, ukuran file masih besar.

Ikon Bitmap juga memiliki kekurangan dalam fleksibilitas dan skalabilitas; katakanlah kita perlu memperbesar atau memperbesar ikon ke tingkat tertentu, atau melihatnya melalui resolusi layar yang sangat tinggi seperti pada layar retina; ikon pasti akan ternyata tampak buram.

Nah, jika Anda mempertimbangkan beberapa hal di atas, Anda mungkin perlu menggunakan font ikon.

Menggunakan Font Ikon

Sebuah font ikon adalah seperangkat ikon yang dikemas dalam font web yang nantinya dapat disematkan di situs web menggunakan @ font-face. Seperti yang ditunjukkan Chris di CSS-trick, ada banyak manfaat menggunakan font di atas gambar untuk mengirim ikon;

Font adalah objek berbasis vektor yang, pada dasarnya, adalah resolusi-independen, sehingga ikon akan tetap tajam dalam berbagai resolusi layar termasuk resolusi layar yang sangat tinggi (seperti tingkat retina).
Ini juga dapat diukur, memungkinkan untuk diperbesar di banyak tingkatan tanpa kehilangan kualitas dan presisi.
Karena ikon pada dasarnya adalah font, kita juga dapat mengontrol warna, transparansi, bayangan teks dan bahkan mengubah ukurannya melalui style sheet
Kami juga dapat menghidupkan ikon dengan CSS3.
Ikon disebut dengan @ font-face aturan yang telah didukung sejak Internet Explorer 4 (dengan .eot).
Permintaan HTTP yang lebih kecil dan Ukuran file yang lebih rendah.

Berikut beberapa font ikon gratis terbaik yang dapat kita temukan:

Font yang mengagumkan
IcoMoon
Ikon Media Sosial
Ikon Yayasan Zurb

Pastikan Anda telah memeriksa dan mengikuti lisensi sebelum menanamkannya di situs web Anda untuk menghormati waktu dan kerja keras penulis.

@ Aturan font-wajah

Seperti yang telah kami sebutkan, ikon tertanam menggunakan @ font-face aturan melalui lembar gaya yang menentukan baru font-keluarga. Dalam contoh berikut ini kita akan menggunakan Simbol Web;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: format url ('font / websymbols-regular-webfont.eot? #iefix') ('embedded-opentype'), format url ('font / websymbols-regular-webfont.woff') ('woff'), url ('font / websymbols-regular-webfont.ttf') format ('truetype'), format url ('font / websymbols-regular-webfont.svg # WebSymbolsRegular') ('svg');

Kemudian, dalam dokumen HTML, kita hanya perlu menambahkan karakter yang mewakili ikon, dan alih-alih menerapkan yang baru font-keluarga secara luas dalam dokumen, kita dapat melakukan lebih spesifik dengan menambahkan kelas tambahan ke elemen-elemen tertentu yang perlu dirender, seperti ikon;

  h
 saya
 j
 SEBUAH
 saya

Kembali ke lembar gaya, kami mendefinisikan yang baru font-keluarga untuk kelas yang baru saja kita tambahkan:

 .icon-font font-family: WebSymbolsRegular; ukuran font: 12pt;

Demo @ font-wajah

Menggunakan elemen Pseudo

Jika ikon diperlakukan sebagai elemen samping, kami juga dapat mengirimkan ikon elemen semu. Dengan asumsi bahwa markup HTML kami adalah sebagai berikut:

  Balasan
 Membalas semua
 Meneruskan
 Lampiran
 Gambar

Kita bisa melakukannya dengan cara ini di style sheet:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): before content: "h";  ul.icon-font.pseudo li: nth-child (2): before content: "i";  ul.icon-font.pseudo li: nth-child (3): before content: "j";  ul.icon-font.pseudo li: nth-child (4): before content: "A";  ul.icon-font.pseudo li: nth-child (5): before content: "I";

Demo Pseudo-element

Penggunaan Pribadi Unicode

Ada keadaan di mana ikon tidak tertanam dalam huruf (A, B, C, D, dll), tetapi tertanam dalam Penggunaan Pribadi Unicode untuk meminimalkan bentrok di antara karakter. Seperti di FontAwesome, penulis telah dengan beruntungnya menambahkan semua kode karakter dalam style sheet, yang terlihat seperti ini;

 .icon-glass: before content: "\ f0c6";

Tetapi ketika kita perlu menyematkan ikon langsung ke HTML, sesuatu seperti kode berikut \ f0c6 tidak akan membuat ikon yang runcing, karena itu bukan karakter yang valid yang dikodekan dalam HTML.

HTML membutuhkan marka referensi numerik untuk membuat karakter khusus. Kami telah membahasnya sedikit dalam tutorial kami sebelumnya tentang Tombol CSS3; karakter ini diawali dengan kombinasi tanda ampersand (&), tanda pagar (#) dan x kemudian diikuti oleh angka heksadesimal yang mewakili karakter.

Misalnya, f0c6 adalah angka heksadesimal, sehingga referensi karakter numerik dalam HTML akan menjadi & # xf0c6;, di FontAwesome kode itu akan menampilkan ikon klip kertas, seperti itu;

Demo Unicode

Berlangganan Huruf

Ikon dalam koleksi mungkin tidak semua dibutuhkan. Dalam hal ini, kita dapat menghapus karakter yang tidak digunakan dengan mengatur ulang font yang juga akan menghasilkan ukuran file font yang lebih rendah. Untungnya, ada alat praktis dari FontSquirrel untuk melakukan pekerjaan ini dengan mudah, generator font-@.

Setelah Anda pergi ke halaman itu dan menambahkan font, pilih Ahli. Anda akan melihat beberapa opsi lagi; memilih Berlangganan Kustom.

Dalam contoh ini, kami menggunakan font Sociolico untuk menampilkan ikon media sosial di situs web kami, tetapi ikon yang kami perlukan hanya Dribble, Facebook, dan Twitter yang masing-masing diwakili oleh karakter-karakter ini; d, f dan t. Jadi, letakkan karakter-karakter itu di bidang input Karakter Tunggal sebagai berikut:

Dan kita selesai. Sekarang kita dapat mengunduh font dan dalam kasus saya ukuran font ternyata hanya 3Kb hingga 5Kb. Ingat juga bahwa satu-satunya karakter itu akan dirender menjadi ikon hanya d, f dan t, sedangkan karakter lainnya hanya akan menjadi huruf biasa.

Pemikiran Akhir

Satu hal yang tidak dapat kita lakukan pada praktik ini adalah menambahkan efek yang sangat terperinci seperti ini ke ikon.

Namun, jika desain keseluruhan kami tidak memerlukan detail pada tingkat itu, pendekatan ini bisa menjadi cara yang lebih baik untuk melayani ikon di situs web. Ini memiliki fleksibilitas, skalabilitas, siap retina dengan ukuran file yang sangat kecil, apa lagi yang bisa kita minta?

Terakhir, jika Anda ingin menyelami lebih dalam topik ini, di bawah ini kami telah mengumpulkan beberapa referensi yang berguna, serta demo dan kode sumber kami untuk diunduh.

Bagaimana Membuat Ikon Anda Sendiri Webfont - WebDesignerDepot.com
Menampilkan Font dan Atribut Data - 24Ways
Penggunaan Pribadi Unicode - Wikipedia

Demo
Sumber Unduhan