Bootstrap ikon huruf (Glyphicons)

Bab ini akan menjelaskan ikon huruf (Glyphicons), dan beberapa contoh untuk memahami penggunaannya. format font yang bootstrap dibundel dengan lebih dari 200 mesin terbang. Pertama, mari kita memahami apa ikon font.

Apa ikon huruf?

Font ikon font ikon yang digunakan dalam proyek Web. Meskipun, Glyphicons Halfling memerlukan lisensi komersial, tetapi Anda dapat didasarkan pada proyek Bootstrap untuk penggunaan gratis ikon ini.

Dalam rangka untuk mengungkapkan ikon syukur penulis, saya harap Anda menambahkan situs link GLYPHICONS saat digunakan.

Dapatkan ikon Font

Kami memiliki lingkungan diinstal Bab Download versi 3.x Bootstrap, dan memahami struktur direktori nya. Dalamfontikon folder dapat menemukan font yang berisi file-file ini sebagai berikut:

• glyphicons-Halflings-regular.eot
• glyphicons-Halflings-regular.svg
• glyphicons-Halflings-regular.ttf
• glyphicons-Halflings-regular.woff

aturan CSS terkait ditulis dalamdistfolder css folderbootstrap.cssdanbootstrap-min.cssdalam file.

Font daftar ikon

Klik di sini untuk melihat daftar yang tersedia icon font.

CSS interpretasi aturan

Aturan CSS berikut merupakan glyphicon kelas.

@ Font-face {
  font-family: 'Glyphicons Halflings';
  src: url ( 'font ../ / glyphicons-Halfling-regular.eot');
  src: url ( '../ font / glyphicons-Halfling-regular.eot #iefix?') Format ( 'tertanam-OpenType'), url ( '../ font / glyphicons-Halfling-regular.woff') Format ( 'WOFF'), url ( '../ font / glyphicons-Halfling-regular.ttf') Format ( 'truetype'), url ( '../ font / glyphicons-Halfling-regular.svg # glyphicons_halflingsregular') Format ( 'svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

Jadi aturan font-face sebenarnya tempat untuk menemukan glyphicons deklarasi font-family dan lokasi.

kelas .glyphicon menyatakan posisi relatif offset dari atas 1px, diberikan sebagai inline-block, font pernyataan, ketentuan font-style dan font-weight normal, mengatur tinggi baris ke 1. Selain itu, penggunaan -webkit-font-smoothing: antialiased dan -moz-osx-font-smoothing: grayscale; mendapatkan konsistensi lintas-browser.

Lalu, di mana

.glyphicon: kosong {
  width: 1em;
}

glyphicon kosong.

Ada 200 kelas, masing-masing kelas untuk ikon. Ini kelas format yang umum adalah sebagai berikut:

.glyphicon-kata kunci: sebelum {
  konten: "hexvalue";
}

Misalnya, ikon pengguna untuk menggunakan, itu kelas sebagai berikut:

.glyphicon-friendly: sebelum {
  konten: "\ e008";
}

pemakaian

Untuk menggunakan ikon, cukup gunakan kode berikut. Harap menjaga ruang yang tepat antara ikon dan teks.

<Span class = "glyphicon glyphicon-search"> </ span>

Contoh berikut menunjukkan bagaimana menggunakan ikon Font:

Hasilnya adalah sebagai berikut:

ikon Font dengan bar navigasi

ikon kustom Font

Kita telah melihat bagaimana menggunakan ikon Font, maka kita lihat bagaimana untuk menyesuaikan ikon font.

Kami akan mulai contoh di atas, dengan mengubah ukuran font, warna, dan menerapkan bayangan teks menjadi ikon disesuaikan.

Berikut adalah kode dimulai:

<Jenis Tombol = "tombol" class = "btn btn-primer btn-lg">
  <Span class = "glyphicon glyphicon-friendly"> </ span> Pengguna
</ Tombol>

Efeknya adalah sebagai berikut:

Ukuran kustom Font

Dengan meningkatkan atau menurunkan ukuran font dari ikon, Anda dapat membuat ikon terlihat lebih besar atau lebih kecil.

<Jenis Tombol = "tombol" class = "btn btn-primer btn-lg" style = "font-size: 60px">
  <Span class = "glyphicon glyphicon-friendly"> </ span> Pengguna
</ Tombol>

warna font kustom

<Jenis Tombol = "tombol" class = "btn btn-primer btn-lg" style = "color: rgb (212, 106, 64);">
  <Span class = "glyphicon glyphicon-friendly"> </ span> Pengguna
</ Tombol>

Terapkan bayangan teks

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

icon huruf secara online kustom

Klik di sini untuk menyesuaikan ikon Font >>

daftar ikon