詳解Bootstrap glyphicons字體圖標

更新時間：2016年01月04日 11:02:42 投稿：mrr

本章將講解Bootstrap glyphicons字體圖標，并通過一些實例了解它的使用，字體圖標是在 Web 項目中使用的圖標字體。字體圖標在下載的Bootstrap的fonts文件夾中

本章將講解字體圖標(Glyphicons)，并通過一些實例了解它的使用。Bootstrap 捆綁了 200 多種字體格式的字形。首先讓我們先來理解一下什么是字體圖標。

首先給大家介紹什么是字體圖標：

字體圖標是在 Web 項目中使用的圖標字體。字體圖標在下載的Bootstrap的fonts文件夾中。

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

.glyphicon class 聲明一個從頂部偏移 1px 的相對位置，呈現(xiàn)為 inline-block，聲明字體，規(guī)定 font-style 和 font-weight 為 normal，設置行高為 1。除此之外，使用-webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 獲得跨瀏覽器的一致性。

關于-webkit-font-smoothing和-moz-osx-font-smoothing：

-webkit-font-smoothing屬性。這個屬性可以使頁面上的字體抗鋸齒,使用后字體看起來會更清晰舒服。

none                               ------ 對低像素的文本比較好
subpixel-antialiased       ------默認值
antialiased                     ------抗鋸齒很好
auto
inherit                           ------繼承父元素
initial
-moz-osx-font-smoothing屬性,其中-osx-表明這是mozilla難得的給特定操作系統(tǒng)推出的特性增強，由于缺乏文檔，目前已知的取值是：

grayscale               ------抗鋸齒很好
auto                   ------默認值
inherit                         ------繼承

Bootstrap提供了200個字體圖標，每個圖標對應一個class，在使用時，我們只需要包含glyphicon和對應的class即可。

使用方法：

<!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>

配合button使用：

<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>

效果：

定制字體圖標

在上一個例中，其實我們已經(jīng)實現(xiàn)了對字體圖標大小和顏色的定制，此處再做進一步說明。

通過改變字體的大小或button的大小，可以改變字體圖標的大小。

通過設置color的顏色，可以改變字體圖標的顏色，如下：

<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>

效果：

可以看出：通過改變其父元素或者是span本身的color，都可以改變字體圖標的顏色。

應用文本陰影

<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>