Bootstrap 字体图标

字体图标（Icon Font）不是图片，而是把图标做成字体：每个字形就是一个小图标。Bootstrap 内置 Glyphicons 字体集，图标像文字一样可着色、改大小、加阴影，加载快且缩放不失真。

基本用法

图标通过一个空 span 承载，需同时写 glyphicon 与 glyphicon-图标名 两个类，例如 glyphicon glyphicon-search 显示放大镜。

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon glyphicon-user"></span>
<!-- 效果：依次显示放大镜、房子、人形三个小图标 -->

修饰图标

图标本质是文字，因此可用 font-size 调大小、color 调颜色、text-shadow 加阴影，改动立即生效、无需重新切图。

<span class="glyphicon glyphicon-heart" style="color:red;font-size:32px;"></span>
<span class="glyphicon glyphicon-star" style="color:gold;font-size:24px;"></span>
<!-- 效果：红色大号爱心与金色星星，尺寸颜色随内联样式变化 -->

图标进按钮

图标常与按钮、链接组合：把 span 放进 button 或 a 即可，图标加文字比纯文字更醒目，比纯图标更易懂。

<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span> 搜索</button>
<button class="btn btn-primary"><span class="glyphicon glyphicon-trash"></span> 删除</button>
<button class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> 确定</button>
<!-- 效果：三个按钮左侧各带搜索、垃圾桶、对勾图标 -->

常用图标速查

类名	含义	类名	含义
glyphicon-home	首页	glyphicon-user	用户
glyphicon-search	搜索	glyphicon-envelope	邮件
glyphicon-heart	喜欢	glyphicon-star	收藏
glyphicon-trash	删除	glyphicon-download	下载
glyphicon-ok	正确	glyphicon-remove	关闭
glyphicon-chevron-up	上箭头	glyphicon-refresh	刷新

命名规律是"动作或物品的英文单词"，完整清单可查阅 Glyphicons 官方图标名表。

小结

用 span 加 glyphicon 类即可获得整套矢量图标，比切图省事且可任意着色缩放。注意 Bootstrap 4 起不再捆绑该字体集，需要自行引入 Font Awesome 等图标库。