Font Ikon: Bagaimana cara kerjanya?

89

Saya memahami bahwa font ikon hanyalah font dan Anda bisa mendapatkan ikon hanya dengan memanggil nama kelasnya, tetapi bagaimana cara kerja font ikon?

Saya telah mencoba memeriksa sumber daya font ikon terkait yang dimuat di Chrome untuk melihat bagaimana font ikon menampilkan ikon (dibandingkan dengan font umum) tetapi saya belum dapat mengetahui bagaimana ini terjadi.

Saya juga tidak berhasil menemukan sumber daya tentang bagaimana "teknik font ikon" ini dilakukan, meskipun ada banyak font ikon yang tersedia . Ada juga banyak sumber daya yang menunjukkan bagaimana font ikon dapat diintegrasikan , tetapi tampaknya tidak ada yang berbagi atau menulis tentang bagaimana hal ini dilakukan!

css web fonts icons icon-fonts Vivek Chandra
sumber

Jawaban:

53

Glyphicons adalah gambar dan bukan font. Semua ikon ditemukan dalam gambar sprite (juga tersedia sebagai gambar individual) dan ditambahkan ke elemen sebagai posisinya backround-image:

Glyphicons

Ikon font yang sebenarnya ( FontAwesome , misalnya) memang melibatkan pengunduhan font tertentu dan memanfaatkan contentproperti, misalnya:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Karena contentproperti tidak didukung di browser lama, properti ini juga menggunakan gambar .

Berikut adalah contoh FontAwesome yang benar-benar mentah yang digunakan sebagai font, mengubah ( - Anda mungkin tidak dapat melihat ini!) Menjadi ambulans: http://jsfiddle.net/GWqcF/2

James Donnelly
sumber
4
Ikon FontAwesome adalah font. Saya bahkan menyebutkan FontAwesome dalam jawaban saya dan melanjutkan dengan mengatakan bagaimana mereka menangani browser yang tidak mendukung metode CSS mereka untuk menambahkan ikon ke halaman.
James Donnelly
3
Ikon adalah karakter font. Sebagai contoh kasar: huruf "Z" dapat dirancang agar terlihat seperti koper, disimpan sebagai font, dan kemudian digunakan di situs web.
James Donnelly
1
Berikut adalah contoh FontAwesome yang benar-benar mentah digunakan, berubah menjadi ambulans: jsfiddle.net/GWqcF/2
James Donnelly
6
@VivekChandra ya itu benar! :-) Font ikon sama seperti font lainnya kecuali karakternya ditata agar terlihat seperti ikon. FontAwesome menggunakan serangkaian karakter yang disediakan untuk "penggunaan pribadi" .
James Donnelly
1
Hebat. Terima kasih untuk semua sumber daya - akan memeriksanya, semuanya lebih jelas sekarang.
Vivek Chandra
23

Jika pertanyaan Anda adalah bagaimana kelas CSS dapat memasukkan karakter tertentu (yang akan ditampilkan sebagai ikon dalam font khusus), lihat sumber FontAwesome :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Jadi petunjuk konten CSS digunakan untuk menyisipkan karakter (yang berasal dari area khusus Unicode khusus penggunaan pribadi yang tidak mengacaukan pembaca lain).

Thilo
sumber
2
Apa arti slash f?
CodyBugstein
5
Itu fbukan bagian darinya, itu hanya angka hex 15. Garis miring terbalik memulai urutan pelolosan untuk titik kode heksadesimal. \f004di CSS seperti di HTML.
Thilo
11

Bagaimana ikon webfont bekerja?

Ikon font web bekerja dengan menggunakan CSS untuk memasukkan mesin terbang tertentu ke dalam HTML menggunakan properti konten. Ini kemudian digunakan @font-faceuntuk memuat font web dingbat yang mengatur gaya mesin terbang yang disuntikkan. Hasilnya adalah mesin terbang yang disuntikkan menjadi ikon yang diinginkan.

Untuk memulai, Anda memerlukan file font web dengan ikon yang Anda butuhkan, baik yang ditentukan untuk ASCIIkarakter tertentu (A, B, C, !, @, #, etc.)atau di Area Penggunaan Pribadi font Unicode, yang merupakan spasi di font yang tidak akan digunakan oleh karakter tertentu di Font yang dikodekan unicode.

Baca lebih lanjut, cara membuat ikon webfont di Responsive Webfont Icons .

artamonovdev.dll
sumber