bootstrap字體圖標(biāo)（Glyphicons）

a.什么是字體圖標(biāo)

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

b.bootstrap自帶字體圖標(biāo)文件結(jié)構(gòu)：

c.css樣式中代碼如下：

@font-face {font-family: 'Glyphicons Halflings';src: url('../fonts/glyphicons-halflings-regular.eot');src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } .glyphicon {position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }

d.用法：

如需使用圖標(biāo)，只需要簡(jiǎn)單地使用下面的代碼即可。請(qǐng)?jiān)趫D標(biāo)和文本之間保留適當(dāng)?shù)目臻g。

<span class="glyphicon glyphicon-search"></span>

e.示例代碼如下：

<p><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-attributes"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-order"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-order-alt"></span></button> </p><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user"></span> User </button>

f.定制字體尺寸

通過(guò)增加或減少圖標(biāo)的字體尺寸，您可以讓圖標(biāo)看起來(lái)更大或更小。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"><span class="glyphicon glyphicon-user"></span> demo</button

g.定制字體顏色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);"><span class="glyphicon glyphicon-user"></span> User</button>

h.應(yīng)用文本陰影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"><span class="glyphicon glyphicon-user"></span> User</button>

效果如下：

i.圖標(biāo)列表：

參考：http://www.shouce.ren/api/view/a/784

j.在線定制字體：

http://www.shouce.ren/tool/tubiao

圖標(biāo)列表

轉(zhuǎn)載于:https://www.cnblogs.com/wuheng1991/p/5226607.html

總結(jié)

以上是生活随笔為你收集整理的bootstrap基础学习十篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。