BootStrap glyphicons 字體圖標(biāo)實(shí)現(xiàn)方法
相關(guān)閱讀:
詳解Bootstrap glyphicons字體圖標(biāo)
先給大家說(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)字體的樣式
.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
.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)單了,具體代碼如下所示:
<!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;} /* 偽元素對(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;} 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>測(cè)試頁(yè)面,說(shuō)明清參考:<a >bootstrap glyphicons 字體實(shí)現(xiàn)方法</a></h2> <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)方法到此就結(jié)束了,如果大家有任何問(wèn)題歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- 本地Bootstrap文件字體圖標(biāo)引入?yún)s無(wú)法顯示問(wèn)題的解決方法
- Bootstrap字體圖標(biāo)無(wú)法正常顯示的解決方法
- BootStrap glyphicon圖標(biāo)無(wú)法顯示的解決方法
- Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法
- bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
- JS組件系列之Bootstrap Icon圖標(biāo)選擇組件
- 很不錯(cuò)的兩款Bootstrap Icon圖標(biāo)選擇組件
- 詳解Bootstrap glyphicons字體圖標(biāo)
- bootstrap中添加額外的圖標(biāo)實(shí)例代碼
相關(guān)文章
微信小程序 下拉列表的實(shí)現(xiàn)實(shí)例代碼
這篇文章主要介紹了微信小程序 下拉列表的實(shí)現(xiàn)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03使用JavaScript實(shí)現(xiàn)一個(gè)拖拽縮放效果
這篇文章主要介紹了如何使用JS實(shí)現(xiàn)一個(gè)這樣的拖拽縮放效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別
這篇文章主要介紹了JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08ES6中l(wèi)et、const的區(qū)別及變量的解構(gòu)賦值操作方法實(shí)例分析
這篇文章主要介紹了ES6中l(wèi)et、const的區(qū)別及變量的解構(gòu)賦值操作方法,結(jié)合實(shí)例形式分析了ES6中l(wèi)et、const的功能、原理、使用方法及數(shù)組、字符串、函數(shù)參數(shù)等解構(gòu)賦值相關(guān)操作技巧,需要的朋友可以參考下2019-10-10js實(shí)現(xiàn)獲取當(dāng)前時(shí)間是本月第幾周的方法
這篇文章主要介紹了js實(shí)現(xiàn)獲取當(dāng)前時(shí)間是本月第幾周的方法,涉及javascript針對(duì)日期及時(shí)間的相關(guān)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08js對(duì)字符串進(jìn)行編碼的方法總結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇js對(duì)字符串進(jìn)行編碼的方法總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11