bootstrap字體圖標（Glyphicons）

a.什么是字體圖標

字體圖標是在 Web 項目中使用的圖標字體。雖然，Glyphicons Halflings 需要商業許可，但是您可以通過基于項目的 Bootstrap 來免費使用這些圖標。

b.bootstrap自帶字體圖標文件結構：

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.用法：

如需使用圖標，只需要簡單地使用下面的代碼即可。請在圖標和文本之間保留適當的空間。

<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.定制字體尺寸

通過增加或減少圖標的字體尺寸，您可以讓圖標看起來更大或更小。

<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.應用文本陰影

<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.圖標列表：

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

j.在線定制字體：

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

圖標列表

轉載于:https://www.cnblogs.com/wuheng1991/p/5226607.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。