BootStrapglyphicons字體圖標(biāo)如何實(shí)現(xiàn)

這篇文章主要介紹“BootStrap glyphicons字體圖標(biāo)如何實(shí)現(xiàn)”，在日常操作中，相信很多人在BootStrap glyphicons字體圖標(biāo)如何實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”BootStrap glyphicons字體圖標(biāo)如何實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)來(lái)電聯(lián)系：028-86922220，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)網(wǎng)頁(yè)制作領(lǐng)域十年，包括成都咖啡廳設(shè)計(jì)等多個(gè)領(lǐng)域擁有多年的網(wǎng)站運(yùn)維經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)，為企業(yè)錦上添花！

先給大家說(shuō)下什么是字體圖標(biāo)？

字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。雖然，Glyphicons Halflings 需要商業(yè)許可，但是您可以通過(guò)基于項(xiàng)目的 Bootstrap 來(lái)免費(fèi)使用這些圖標(biāo)。

為了表示對(duì)圖標(biāo)作者的感謝，希望您在使用時(shí)加上 GLYPHICONS 網(wǎng)站的鏈接。

使用bootstrap很久了，內(nèi)置的 glyphicons 圖標(biāo)，足以滿足小型項(xiàng)目的需求。只需要使用一個(gè)樣式，即可調(diào)出圖標(biāo)。雖然感覺(jué)很神奇，一直沒(méi)有分析他是怎么實(shí)現(xiàn)的，通過(guò)Chrome 開(kāi)發(fā)者工具，定位到對(duì)應(yīng)的elment 后，得知他是使用的 CSS 偽元素技術(shù)。

<span class="glyphicons glyphicon-eur"></span>

.glyphicons 定義了所有 glyphicons 圖標(biāo)字體的樣式

BootStrap glyphicons字體圖標(biāo)如何實(shí)現(xiàn)

.glyphicons{
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing:
}

顯示的內(nèi)容由另一個(gè) 類定義的子類定義，比如：glyphicon-eur:before

BootStrap glyphicons字體圖標(biāo)如何實(shí)現(xiàn)

.glyphicon-eur:before, .glyphicon-euro:before{
content: "\20ac";
}

查閱文檔，發(fā)現(xiàn)除了:before（CSS2實(shí)現(xiàn)：在元素之前添加內(nèi)容），還有:first-letter（CSS1實(shí)現(xiàn)，向文本的第一個(gè)字母添加特殊樣式，display設(shè)置為block時(shí)有效）、:first-line（CSS1實(shí)現(xiàn)，向文本的首行添加特殊樣式，display設(shè)置為block時(shí)有效）、:after（CSS2實(shí)現(xiàn)：在元素之后添加內(nèi)容）。

明白了原理，代碼就簡(jiǎn)單了，具體代碼如下所示：

BootStrap glyphicons字體圖標(biāo)如何實(shí)現(xiàn)

<!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 h3{font-size:16px;font-width:200;color:#FFF;background:#0096D7;margin:0;padding:5px 15px;}
.container h3 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;}
/* 偽元素對(duì) 元素樣式?jīng)]有影響 */
.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;}
h3: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">
<h3>測(cè)試頁(yè)面，說(shuō)明清參考：<a href="http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/">bootstrap glyphicons 字體實(shí)現(xiàn)方法</a></h3>
<div>
<ul class="me">
<!-- glyphicons 方式 -->
<li><span class="font-icon web"></span> http://www.miaoqiyuan.cn/</li>
<!-- 放入內(nèi)部的效果 -->
<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>
<!-- 放入內(nèi)部的效果，樣式疊加，和普通樣式一樣，后設(shè)置的也會(huì)把前設(shè)置的覆蓋掉 -->
<li><span class="font-icon wechat chat">mqycn2</span></li>
</ul>
</div>
</div>
</body>
</html>

到此，關(guān)于“BootStrap glyphicons字體圖標(biāo)如何實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)站題目：BootStrapglyphicons字體圖標(biāo)如何實(shí)現(xiàn)
網(wǎng)址分享：http://www.rwnh.cn/article46/gpoohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航、小程序開(kāi)發(fā)、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

BootStrapglyphicons字體圖標(biāo)如何實(shí)現(xiàn)