Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang kemahiran fon Bootstrap glyphicons icon_javascript

Penjelasan terperinci tentang kemahiran fon Bootstrap glyphicons icon_javascript

WBOYasal: 2016-05-16 15:22:121011semak imbas

Bab ini akan menerangkan ikon fon (Glyphicons) dan memahami penggunaannya melalui beberapa contoh. Bootstrap disertakan dengan glyph dalam lebih 200 format fon. Mula-mula, mari kita fahami apa itu ikon fon.

Pertama sekali, izinkan saya memperkenalkan kepada anda apa itu ikon fon:

Ikon Fon ialah fon ikon yang digunakan dalam projek web. Ikon fon berada dalam folder fon Bootstrap yang dimuat turun.

.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;
}

Kelas.glyphicon mengisytiharkan kedudukan relatif mengimbangi 1px dari atas, menjadikannya sebagai blok sebaris, mengisytiharkan fon, menentukan gaya fon dan berat fon seperti biasa dan menetapkan ketinggian garisan kepada 1. Jika tidak, gunakan -webkit-font-smoothing: antialiased dan -moz-osx-font-smoothing: skala kelabu untuk konsistensi silang penyemak imbas.

Mengenai -webkit-font-smoothing dan -moz-osx-font-smoothing:

-webkit-font-smoothing attribute. Atribut ini boleh menjadikan fon pada halaman anti-alias Selepas menggunakannya, fon akan kelihatan lebih jelas dan selesa.

tiada subpiksel-antialiased ------Nilai lalai
antialiased . auto
Warisi ------ Warisi elemen induk
permulaan
-moz-osx-font-smoothing attribute, di mana -osx- menunjukkan bahawa ini adalah peningkatan ciri yang jarang dilancarkan oleh mozilla untuk sistem pengendalian tertentu Disebabkan kekurangan dokumentasi, nilai yang diketahui pada masa ini ialah:

skala kelabu — anti-alias yang sangat baik

auto —----Nilai lalai

Mewarisi ------ Warisan

Bootstrap menyediakan 200 ikon fon, setiap ikon sepadan dengan kelas Apabila menggunakannya, kita hanya perlu memasukkan glyphicon dan kelas yang sepadan.

Penggunaan:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset = "utf-8"> 
  <title>demo</title> 
  <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> 
  <style type="text/css"> 
    body{padding: 20px;} 
  </style> 
</head> 
<body> 
  <span class = "glyphicon glyphicon-lock"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:30px;"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:60px;"></span>   
</body> 
</html>

Gunakan dengan butang:

<body> 
  <button class="btn btn-default"> 
    <span class = "glyphicon glyphicon-home"></span> 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-info"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-lg"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-sm"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
</body>

Kesan:

Ikon fon tersuai Dalam contoh sebelumnya, kami sebenarnya telah menyesuaikan saiz dan warna ikon fon, yang akan diterangkan dengan lebih lanjut di sini.

Anda boleh menukar saiz ikon fon dengan menukar saiz fon atau saiz butang.

Dengan menetapkan warna, anda boleh menukar warna ikon fon, seperti berikut:

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success" style="color:#FF0000;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home" style="color:#FF0000;"></span> Home 
  </button> 
</body>

Kesan:

Ia boleh dilihat bahawa warna ikon fon boleh ditukar dengan menukar warna elemen induknya atau rentang itu sendiri.

Gunakan bayangan teks

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg" style="text-shadow: black 3px 2px 3px;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg"> 
    <span class = "glyphicon glyphicon-home" style="text-shadow: black 3px 2px 3px;"></span> Home 
  </button> 
</body>

Untuk maklumat lanjut, sila lihat ikon fon dan dokumentasi rasmi bootstrap:

Kandungan di atas memperkenalkan anda kepada pengetahuan yang berkaitan tentang ikon fon Bootstrap glyphicons saya harap anda menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Melaksanakan penyingkiran (padam) elemen tertentu dalam tatasusunan berdasarkan kemahiran JavaScript_javascriptArtikel seterusnya：Melaksanakan penyingkiran (padam) elemen tertentu dalam tatasusunan berdasarkan kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi