Font Ikon: Bagaimana cara kerjanya?

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!

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:

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

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

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 .