首頁 > 開發者 > JavaScript
BootStrap glyphicons 字型表徵圖實現方法，glyphicons字型表徵圖
相關閱讀：
詳解Bootstrap glyphicons字型表徵圖
先給大家說下什麼是字型表徵圖？
字型表徵圖是在 Web 項目中使用的表徵圖字型。雖然，Glyphicons Halflings 需要商業許可，但是您可以通過基於項目的 Bootstrap 來免費使用這些表徵圖。
為了表示對表徵圖作者的感謝，希望您在使用時加上 GLYPHICONS 網站的連結。
使用bootstrap很久了，內建的 glyphicons 表徵圖，足以滿足 小型項目的需求。只需要使用一個樣式，即可調出表徵圖。雖然感覺很神奇，一直沒有分析他是怎麼實現的，通過Chrome 開發人員工具，定位到 對應的elment 後，得知他是使用的 CSS 虛擬元素技術。
<span class="glyphicons glyphicon-eur"></span>
.glyphicons 定義了 所有 glyphicons 表徵圖字型的樣式
.glyphicons{position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: 400;line-height: 1;-webkit-font-smoothing:}
顯示的內容由另一個 類定義的子類定義，比如：glyphicon-eur:before
.glyphicon-eur:before, .glyphicon-euro:before{content: "\20ac";}
查閱文檔，發現除了:before（CSS2實現：在元素之前新增內容），還有:first-letter（CSS1實現，向文本的第一個字母添加特殊樣式，display設定為block時有效）、:first-line（CSS1實現，向文本的首行添加特殊樣式，display設定為block時有效）、:after（CSS2實現：在元素之後新增內容）。
明白了原理，代碼就簡單了，具體代碼如下所示：
<!doctype html><head lang="zh-CN"><head><meta charset="GB2312"><title>DEMO of miaoqiyuan.cn</title><style type="text/css">body{background:#CCC;font-family:'Microsoft Yahei';}.container{background:#FFF;width:800px;margin:50px auto;border:solid 1px #0096D7;border-radius:10px;}.container h2{font-size:16px;font-width:200;color:#FFF;background:#0096D7;margin:0;padding:5px 15px;}.container h2 a{color:#FFF;}.container ul{list-style:none;padding:0;margin:0;}ul.me{padding:5px;}ul.me li{margin:5px 10px;background:#EEE;height:40px;line-height:40px;text-indent:5px;border:solid 1px #DDD;border-radius:10px;}.font-icon:before,.font-icon:after{font-family:'Impact';font-size:16px;color:#0096D7;padding:4px 6px;background:#CDF;border:solid 1px #0096D7;border-radius:10px;margin-right:5px;}/* 虛擬元素對 元素樣式沒有影響 */.font-icon{color:#090;font-family:'Airal';}.web:before{content:'Home';}.qq:before{content:'QQ';}.wechat:before{content:'WeChat';color:#090;border-color:#090;background:#99F760;}.chat:before{color:#C00;}h2:first-letter{font-size:20px;color:#C00;}.chat:after{content:'ChatMe!';background:#FDC;color:#D76900;border-color:#D76900;margin-left:5px;}</style></head><body><div class="container"><h2>測試頁面，說明清參考：<a href="http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/">bootstrap glyphicons 字型實現方法</a></h2><div><ul class="me"><!-- glyphicons 方式 --><li><span class="font-icon web"></span> http://www.miaoqiyuan.cn/</li><!-- 放入內部的效果 --><li><span class="font-icon wechat"></span> mqycn2 </li><!-- glyphicons 方式 前後放置 --><li><span class="font-icon qq">77068320 1301425789 </span> <span class="font-icon chat"></span></li><!-- 放入內部的效果，樣式疊加，和普通樣式一樣，後設定的也會把前設定的覆蓋掉 --><li><span class="font-icon wechat chat">mqycn2</span></li></ul></div></div></body></html>
關於小編給大家介紹的BootStrap glyphicons 字型表徵圖實現方法到此就結束了，如果大家有任何問題歡迎給我留言，小編會及時回複大家的!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
