詳解Bootstrap glyphicons字體圖標

2019-11-20 10:52:11

字體：大中小

來源：轉載

供稿：網友

本章將講解字體圖標(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 的相對位置，呈現為 inline-block，聲明字體，規定 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難得的給特定操作系統推出的特性增強，由于缺乏文檔，目前已知的取值是：

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>

效果：

定制字體圖標

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

通過改變字體的大小或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>