Bagaimana cara menampilkan font ikon di halaman web? Gaya tampilan font ikon di HTML

Menggunakan ikon font untuk menghasilkan ikon memiliki manfaat berikut dibandingkan dengan ikon berbasis gambar:

1. Ukuran Perubahan Gratis

2. Dengan bebas memodifikasi warnanya

3. Tambahkan Efek Bayangan

4.ie6 juga dapat mendukungnya

5. Dukung sifat -sifat ikon gambar lainnya, seperti transparansi dan rotasi, dll.

6. Anda dapat menambahkan atribut seperti stroke teks dan latar belakang-klip: teks selama browser mendukungnya.

Modifikasi Teks:

<h3>

<span aria-hidden = data true-icon = &#x21dd;> </span>

Statistik

</h3>

[data-icon]: sebelum {

Font-Family: Ikon; / * Ikon byo font, dipetakan dengan cerdas */

konten: attr (data-icon);

Bicaralah: tidak ada; /* Tidak bisa dipercaya, tapi hei. */

}

Ikon Individu:

<a href =# class = icon-alone>

<span aria-hidden = data true-icon = &#x25a8;> </span>

<span class = screen-reader-text> rss </span>

</a>

/ * CSS yang sama seperti di atas, ditambah */

.icon-alone {

Tampilan: blok inline; / * Chrome 19 sangat aneh dengan clickability tanpa ini */

}

.screen-reader-text { / * reusable, Toolbox jenis kelas * /

Posisi: Absolute;

TOP: -9999px;

Kiri: -9999px;

}

Jika Anda perlu membuat Iconfont Anda sendiri, disarankan untuk menggunakan Iconmoon. Menggunakannya, Anda dapat menghasilkan ikon font yang Anda butuhkan dengan mengunggah SVG atau font. Artikel ini adalah demonstrasi online menggunakan Iconmoon untuk menghasilkan.

Silakan kunjungi demonstrasi online untuk melihat hasilnya. Saya harap Anda menyukai ikon font. Jika Anda berpikir ikonnya tidak cukup halus, Anda dapat mempertimbangkan menggunakan Cufon untuk diproses, sehingga ikon yang dihasilkan lebih indah.

Sumber: http://www.gbin1.com/technology/css/20120827-icon-font-usage/