Apakah ikon fon dalam html5

Dalam HTML5, ikon fon ialah fon ikon yang digunakan dalam projek Web Intipatinya ialah fon istimewa melalui fon ini, ia dipaparkan kepada pengguna seperti gambar. Ikon fon boleh dikawal sewenang-wenangnya dalam saiz dan warna melalui CSS seperti teks, yang sangat mudah untuk membina tapak web.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Apakah itu ikon fon?

Ringkasnya, ikon fon ialah fon istimewa Melalui fon ini, ia dipaparkan kepada pengguna seperti gambar. Kelebihan terbesar ikon fon ialah ia tidak akan berubah bentuk dan dimuatkan dengan cepat. Ikon fon boleh dikawal sewenang-wenangnya dalam saiz dan warna melalui CSS seperti teks, yang sangat mudah untuk membina tapak web.

Ikon fon ialah fon yang menggunakan imej kecil dan bukannya bentuk huruf. Seperti aksara, setiap fon ikon ialah elemen vektor yang berskala mengikut keperluan dan boleh diubah suai menggunakan gaya CSS.

Sebab utama untuk menggunakan fon ikon ialah anda boleh menukar saiz, warna, bentuk dengan mudah. Fon ikon bersifat lutsinar, jadi anda boleh meletakkannya pada sebarang warna atau jenis latar belakang, dan anda juga boleh menambah strok atau menukar kelegapan ikon.

Semua operasi persediaan boleh dilakukan menggunakan CSS, jadi anda tidak perlu mencipta imej unik untuk setiap contoh ikon baharu dalam reka bentuk anda (ini bagus untuk memastikan reka bentuk tapak web dan kod anda ringan).

Fon ikon ialah imej vektor, yang bermaksud ia boleh diskalakan tanpa herotan. Seperti fon lain, anda boleh menjadikannya lebih besar atau lebih kecil mengikut keperluan. Gunakan fon ikon sahaja sebagai elemen artistik, walaupun dalam medan teks lain.

Kebaikan dan keburukan menggunakan ikon fon

Kebaikan

• Ikon mudah untuk skala selagi kelas yang sepadan wujud dalam CSS;

• Anda boleh mendapatkan perpustakaan ikon sedia ada yang besar dengan mudah di Internet;

• Sangat mudah untuk menukar sifat ikon, tidak kira apa yang anda gunakan untuk membina tapak web anda; );

• Terdapat beribu-ribu ikon untuk dipilih dalam pelbagai gaya; fon ikon.

2. Kelemahan

• 
  

Ikon ialah satu warna atau warna kecerunan (dalam kebanyakan kes, Tetapi sesetengah perkhidmatan yang menawarkan lebih banyak pilihan penyesuaian sedang mengubahnya);

Jika fon ikon tidak boleh dimuatkan, tiada fon sandaran lain untuk digunakan;

• Anda mungkin tidak memerlukan set ikon penuh;

• Sesetengah penyemak imbas masih belum atau tidak menyokong sepenuhnya fon ikon;

• Anda mungkin tidak menemui sumber yang sesuai dengan keperluan anda.

• Terdapat dua cara untuk mendapatkan ikon fon

  
  

Ikon vektor Alibaba laman web rasmi : www.iconfont.cn (disyorkan)laman web asing: http://icomoon.io

• Bagaimana untuk menggunakan ikon fon?

  
  

Disebabkan oleh kelajuan pemuatan laman web asing ini yang perlahan, di sini saya menggunakan perpustakaan ikon yang disediakan oleh Alibaba untuk demonstrasi

(1) Cari dalam pelayar iconfont, cari laman web rasmi Alibaba Vector Icon Library, kemudian daftar dan log masuk. Jika anda telah mendaftar sebelum ini, langkau langkah ini (2) Gerakkan tetikus ke dalam perpustakaan ikon, di sana akan; menjadi senarai juntai bawah, pilih Pustaka ikon rasmi;

(3) Klik pada pustaka ikon pertama dalam senarai untuk membuka halaman baharu dan menambah ikon kegemaran anda ke perpustakaan;

Tambah ke perpustakaan:

(4) Terdapat troli beli-belah dalam penjuru kanan sebelah atas, anda tambahkan ke pustaka Semua ikon fon di dalam berada di dalam; 🎜>

Kemudian halaman web secara automatik akan melompat ke projek yang sepadan, seperti yang ditunjukkan dalam gambar:

Muat turun ke setempat: (langkah paling kritikal)

Fail yang dimuat turun dan dinyahmampat adalah seperti berikut:

(6) Bagaimana untuk menggunakan ikon fon dalam projek ini sebenarnya sangat mudah. ​​Buat teg i atau teg span, tambahkan nama kelas dan tampal kod yang sepadan ke dalam teg.

Buka demo_index.html ini dan salin sahaja rentetan kod ini seperti yang ditunjukkan:

Kemudian tampal iconfont.css ke dalam folder css This is My project folder dan kod yang sepadan:

Ini ialah ikon fon yang dilihat dalam Google Chrome (saya rasa fon itu terlalu Jika ia kecil, ia boleh dikawal melalui atribut saiz fon).

Pengesyoran berkaitan: "tutorial video html"

Atas ialah kandungan terperinci Apakah ikon fon dalam html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!