bootstrap之glyphicon字体图标

---

👉 Bootstrap全局css样式

glyphicon字体图标用途广泛，可以把它们应用到按钮、下拉菜单、导航、警告框、弹出框、输入框等地方。例如，在做SM管理系统项目的时候，就可以在编辑、删除按钮中使用glyphicon字体图标。

出于性能的考虑，所有图标都需要一个基类glyphicon 和 一个对应每个图标的类glyphicon-xxx。我们可直接到Glyphicons字体图标库中，将图标下面的两个类copy下来，放到标签元素中使用即可。

Glyphicons图标类可以应用到很多元素中

<a class="glyphicon glyphicon-refresh" href="#"></a>
<p class="glyphicon glyphicon-edit"></p>
<span class="glyphicon glyphicon-trash"></span>
<li class="glyphicon glyphicon-search"></li>
<div class="glyphicon glyphicon-home"></div>
. . . 

但，Glyphicons图标类一般不在同一个元素中与其它类共同存在。而是创建一个嵌套的<span>标签，并将图标类应用到这个<span>标签中。并且，图标类一般不应用在包含任何文本内容或子元素的元素上。

<span class="glyphicon glyphicon-edit"></span> 编辑

---

【字体图标按钮】

<button class="btn btn-primary">
<span class="glyphicon glyphicon-edit"></span> 编辑
</button>
<button class="btn btn-primary">
    <span class="glyphicon glyphicon-trash"></span> 删除
</button>
<button class="btn btn-primary">
    <span class="glyphicon glyphicon-search"></span> 查询
</button>

【定制字体阴影】

<button class="btn btn-primary" style="text-shadow: black 5px 3px 3px;">
    <span class="glyphicon glyphicon-edit"></span> 编辑
</button>
<button class="btn btn-primary" style="text-shadow: black 5px 3px 3px;">
    <span class="glyphicon glyphicon-trash"></span> 删除
</button>
<button class="btn btn-primary" style="text-shadow: black 5px 3px 3px;">
    <span class="glyphicon glyphicon-search"></span> 查询
</button>

【定制字体颜色】

<button class="btn btn-primary" style="color: red">
   <span class="glyphicon glyphicon-edit"></span> 编辑
</button>
<button class="btn btn-primary" style="color: red">
    <span class="glyphicon glyphicon-trash"></span> 删除
</button>
<button class="btn btn-primary" style="color: red">
    <span class="glyphicon glyphicon-search"></span> 查询
</button>

【定制字体大小】

<button class="btn btn-primary" style="font-size: 25px">
    <span class="glyphicon glyphicon-edit"></span> 编辑
</button>
<button class="btn btn-primary" style="font-size: 20px">
    <span class="glyphicon glyphicon-trash"></span> 删除
</button>
<button class="btn btn-primary" style="font-size: 15px">
    <span class="glyphicon glyphicon-search"></span> 查询
</button>

---

更多的时候，应用了图标类的<span>标签，是包裹在<a>标签中的。

<a class="btn btn-primary" href="#">
	<span class="glyphicon glyphicon-edit"></span> edit
</a>
<a class="btn btn-danger" href="#">
	<spanclass="glyphicon glyphicon-trash"></span> delete
</a>
<a class="btn btn-success" href="#">
	<spanclass="glyphicon glyphicon-search"></span> search
</a>

参考

Glyphicons字体图标库

Glyphicons字体图标定制