Bootstrap 2 字体图标 - Bootstrap 2 基础教程

字体图标由于它的一些好处变得越来越流行了

本节我们将学习如何如何通过 Bootstrap 2 来使用和定制字体图标

我们将解释在后台工作的 CSS 规则，这将让您更好的了解图标字体的工作原理

这样，您就能熟悉除了 Glyphicons 之外的任何图标字体设置

什么是 Glyphicons

Glyphicons 是在 Web 项目中使用的图标字体

虽然，使用 Glyphicons 需要商业许可，但是我们可以通过基于项目的 Bootstrap 来免费使用这些图标

为了表示对图标作者的感谢，希望你在使用时加上 Glyphicon 网站的链接

获取 Glyphicons

我们可以从 https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip 下载 Bootstrap 3（或者任何版本 3 之前的版本）

我们可以找到 dist 文件夹内的 fonts 文件夹内的 glyphicons

这里有四个文件

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上

如何使用 Glyphicons

一般来说，我们可以通过 Bootstrap 3 使用 Glyphicons 的常见语法如下

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

* 可以是任意代表特定图标的关键词。下面的实例演示了如何通过按钮使用它。

<button type="button" class="btn btn-primary btn-lg">
        <span class="glyphicon glyphicon-user"></span> User
    </button>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 table demo

完整的范例

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
                <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
</div>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 table demo