bootstrap基础学习十篇

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

图标列表