Bacaan terkait:
Penjelasan terperinci tentang ikon font glyphicons bootstrap
Izinkan saya memberi tahu Anda ikon font apa itu?
Ikon font adalah ikon font yang digunakan dalam proyek web. Meskipun setengah glificons membutuhkan lisensi komersial, Anda dapat menggunakan ikon-ikon ini secara gratis dengan bootstrap berbasis proyek.
Untuk mengucapkan terima kasih kepada penulis ikon, saya harap Anda akan menambahkan tautan ke situs web Glyphicons saat menggunakannya.
Saya telah menggunakan Bootstrap untuk waktu yang lama, dan ikon Glyphics bawaan sudah cukup untuk memenuhi kebutuhan proyek-proyek kecil. Anda hanya perlu menggunakan satu gaya untuk memunculkan ikon. Meskipun rasanya luar biasa, saya tidak pernah menganalisis bagaimana menerapkannya. Setelah menemukan elektro yang sesuai melalui alat pengembang chrome, saya belajar bahwa dia menggunakan teknologi elemen pseudo CSS.
<span> </span>
.Glyphicons mendefinisikan gaya semua font ikon Glyphicons
.glyphicons {position: relatif; atas: 1px; display: inline-block; font-family: 'glyphicons halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing:}Konten yang ditampilkan ditentukan oleh subkelas yang ditentukan oleh kelas lain, seperti: Glyphicon-Eur: Sebelumnya
.glyphicon-eur: Sebelumnya, .glyphicon-euro: sebelum {content: "/20ac";}Melihat melalui dokumen, saya menemukan bahwa di samping: Sebelum (implementasi CSS2: Tambahkan konten sebelum elemen), ada: huruf pertama (implementasi CSS1, tambahkan gaya khusus ke huruf pertama teks, valid ketika tampilan diatur untuk diblokir),: Line First). Implementasi: CSS1 Implementasi, tambahkan gaya khusus ke baris pertama teks, valid ketika tampilan).
Setelah Anda memahami prinsipnya, kode akan sederhana. Kode spesifiknya adalah sebagai berikut:
<! Doctype html> <head lang = "zh-cn"> <head> <meta charset = "gb2312"> <iteme> demo miaoqiyuan.cn </itement> <style type = "text/css"> latar belakang: #ccc; font-family: 'microsoft Yahei ';}. Container {latar belakang: #fff; Lebar: 800px; margin: 50px auto; perbatasan: solid 1px#0096d7; border-radius: 10px;}. Wadah h2 {font-ukuran: 16px; font-width: 200; color: #FFF; latar belakang: {00px; font-width: 200; color: #FFF; latar belakang: latar belakang: oM: oM; 15px;}.container h2 a{color:#FFF;}.container ul{list-style:none;padding:0;margin:0;}ul.me{padding:5px;}ul.me li{margin:5px 10px;background:#EEE;height:40px;line-height:40px;text-indent:5px;border:solid 1px #Ddd; border-radius: 10px;}. Font-ICon: Sebelumnya, .font-icon: setelah {font-family: 'Impact'; font-size: 16px; warna:#0096d7; padding: 4px 6px; latar belakang: #cdf; border: border 1px#0096d7; Elemen semu tidak berpengaruh pada elemen Gaya*/. Font-Icon {Color:#090; Font-Family: 'Airal';}. Web: Sebelum {Content: 'Home';}. QQ: Sebelum {konten: 'qq';}. WeChat: Sebelum {Content: 'WeChat'; Color:#090; Border-color:#090; latar belakang: latar belakang 99; Ore {Color:#C00;} H2: First-Letter {font-size: 20px; Color:#c00;}. Chat: After {Content: 'ChatMe!'; latar belakang: #fdc; warna:#d76900; test-color:#d76900; margin-left: 5px;} </gaya Border:#d76900; margin-left: 5px;} </gaya} </style> </d76900; margin-left: 5px;} </gayy href = "http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/"> Bootstrap Metode Implementasi Glyphicons Font </a> </h2> <v> <ul> <!-Metode Glificons-> </a> </h2> <van> <ul> <!-Metode GLYPHICONS-> </h2> <in> <ul> <!-GLYPHICONS-> </h2> <in> <ul> <!-GLYPHICONSON-> </h2> <in> <ul> <!-GLYPHICONSON-> <Li> </H2> http://www.miaoqiyuan.cn/</li>< !-- Letakkan efeknya di dalam-> <li> <span> </span> mqycn2 </li> <!-Metode Glyphicons-> <li> <span> </77068320 1301425789 </span> <li> <pan> </77068320 1301425789 </span> <li> <pan> </77068320 1301425789 </span> <li> <pan> </7706820 1301425789 </span> <li> INTERNAL-> <li> <span> </span> mqycn2 </li> <!-Metode Glyphicons-> <li> <span> 77068320 1301425789 </span> <span> </span> <!-Letakkan efeknya di internal-> <li> <pan> </span> mqyc </spanon </spanon </spanon </spancn </li/li <li> <li> </span> mqyc mqyc </spancn </spancn </li </li <li> <li> </span> mqyc mqycn2 Metode-> <li> <span> 77068320 1301425789 </span> <span> </span> <!-Letakkan efeknya di internal-> <li> <span> </span> <!-Letakkan bagian depan dan belakang metode Glyphicons-> <li> <span> 77068320 130145-Span> <li> <pan> <pan> 77068320 1301457878 </span> <pan> Depan dan belakang metode Glyphicons-> <li> <span> 77068320 1301425789 </span> <span> </span> </li> <!-Taruh efeknya di internal-masukkan efek internal dan overlay gaya, seperti gaya normal. Pengaturan terakhir juga akan menimpa pengaturan sebelumnya-> <li> <span> mqycn2 </span> </li> </ul> </div> </div> </body> </html>Metode implementasi ikon font glyphicons bootstrap yang diperkenalkan editor kepada Anda sudah berakhir. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas semua orang tepat waktu!