字体图标（Glyphicons）

Bootstrap捆绑了200多种字体格式的字形。

什么是字体图标？

字体图标是在Web项目中使用的图标字体。虽然，Glyphicons Halflings需要商业许可，但是可以通过基于项目的Bootstrap来免费使用这些图标。

获取字体图标

在Bootstrap 3.x版本中，在fonts文件夹内可以找到字体图标，它包含了下列文件：

  • glyphicons-halfling-regular.eot
  • glyphicons-halfling-regular.svg
  • glyphicons-halfling-regular.ttf
  • glyphicons-halfling-regular.woff

相关的CSS规则卸载dist文件夹内的CSS文件夹内的bootstrap.css和bootstrap-min.css文件里。

CSS规则解释

下面的CSS规则构成glyphicon class。

@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.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';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

所以font-face规则实际上是在找到glyphicons地方声明font-family和位置。

.glyphicon class声明一个从顶部偏移1px的相对位置，呈现为inline-block，声明字体，规定font-style和font-weight为normal，设置行高为1。

除此之外，使用-webkit-font-smoothing:antialiased和-moz-osx-font-smoothing:grayscale;获得跨浏览器的一致性。

然后，在这里

.glyphicon:empty {
  width: 1em;
}

是空的glyphicon。

这里有200个class，每个class针对一个图标。这些class的常见格式如下：

.glyphicon-keyword:before {
  content: "hexvalue";
}

比如，使用的user图标，它的class如下：

.glyphicon-user:before {
  content: "\e008";
}

用法

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

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

<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>

带有导航栏的字体图标

<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>
<!-- jQuery (Bootstrap 插件需要引入) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

定制字体图标

已经看到如何使用字体图标，接下来我们看看如何定制字体图标。
通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

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

定制字体尺寸

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制文本阴影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>
打赏
Post Views: 830