Bootstrap 字体图标(Glyphicons)

Bootstrap 字体图标（Glyphicons）是一种非常流行的图标字体，它可以很容易地在Bootstrap中使用。这些图标在很多Web开发中使用得非常频繁，因为它们可以很好的增加页面的动态效果和美观度。本篇文档将详细介绍Bootstrap 字体图标（Glyphicons）的具体使用方法。

首先，你需要在你的HTML文件中引入Bootstrap 字体图标（Glyphicons）。可以通过以下代码来实现：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

在你引入Bootstrap的样式之后，就可以在你的HTML文件中添加Glyphicons了。可以通过以下代码来添加：

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

这里我们使用的是一个搜索图标。有很多其他的图标可供选择，你可以通过访问Bootstrap官网获取更多的内容。以上代码中的 glyphicon 是指我们要使用Glyphicons，glyphicon-search 则是我们要使用的图标。

在这个段落中，稍微解释一下Glyphicons 的基本设置。首先，字体图标的大小是由字体的大小控制的，这意味着你可以使用CSS的 font-size 属性来调整图标的大小。而颜色也可以通过CSS的 color 属性来控制。Glyphicons 支持其他一些属性，比如 text-shadow 、 opacity 、 transition 等等。

在按照以上步骤添加了Glyphicons 之后，你可能会想了解一下Glyphicons的常用形式。Glyphicons 不仅支持单个图标的添加，还支持图标的堆叠、镜像和旋转。以下是一些示例代码，演示了Glyphicons 的一些常见用例。

<!--基本图标-->
<span class="glyphicon glyphicon-user"></span>
<!--堆叠图标-->
<span class="glyphicon glyphicon-user"><span class="glyphicon glyphicon-envelope"></span></span>
<!--镜像图标-->
<span class="glyphicon glyphicon-user glyphicon-flip-horizontal"></span>
<!--旋转图标-->
<span class="glyphicon glyphicon-user glyphicon-rotate-90"></span>

在以上代码片段中，我们可以看到堆叠（stacking）、镜像（flipping）、旋转（rotating） Glyphicons的效果。在这里，我们使用了 glyphicon-flip-horizontal 和 glyphicon-rotate-90 来分别镜像Glyphicons和旋转Glyphicons。

最后，总结一下Glyphicons的一些常用用例。在HTML文件中使用Glyphicons有很多形式可供选择。你可以只使用基本的单个图标，也可以通过堆叠、镜像和旋转Glyphicons来创建更有趣的效果。需要注意的是，目前Bootstrap4已不再包含Glyphicons，但仍然可以轻松使用。通过以上介绍，相信你可以很好地应用Glyphicons到你的项目中。