Bootstrap字體圖標(glyphicons) · 致力于web前端技術撰寫

### 字體圖標：字體圖標是在 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 ? ? ? ? ? ? ? ? ? ? ------抗鋸齒很好?autoinherit ? ? ? ? ? ? ? ? ? ? ? ? ? ------繼承父元素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> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f555da0.jpg) 配合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> ~~~ 效果： ![](https://box.kancloud.cn/2016-04-07_570603f563fb9.jpg) ### 定制字體圖標在上一個例中，其實我們已經實現了對字體圖標大小和顏色的定制，此處再做進一步說明。通過改變字體的大小或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> ~~~ 效果： ![](https://box.kancloud.cn/2016-04-07_570603f5741f4.jpg) 可以看出：通過改變其父元素或者是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> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f585bc9.jpg) 更多請查看字體圖標，可以bootstrap官方文檔： ![](https://box.kancloud.cn/2016-04-07_570603f59750d.jpg)