简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

directory search

Bootstrap 基础教程 Bootstrap 环境安装 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概览 Bootstrap 按钮 Bootstrap 表单 Bootstrap 表格 Bootstrap 代码 Bootstrap 辅助类 Bootstrap 排版 Bootstrap 图片 Bootstrap 网格系统 Bootstrap 网格系统实例：堆叠的水平 Bootstrap 网格系统实例：手机、平板电脑、台式电脑 Bootstrap 网格系统实例：中型和大型设备 Bootstrap 响应式实用工具 Bootstrap 布局组件 Bootstrap Well Bootstrap 按钮下拉菜单 Bootstrap 按钮组 Bootstrap 标签 Bootstrap 超大屏幕（Jumbotron） Bootstrap 导航栏 Bootstrap 导航元素 Bootstrap 多媒体对象（Media Object） Bootstrap 分页 Bootstrap 徽章（Badges） Bootstrap 进度条 Bootstrap 警告（Alerts） Bootstrap 列表组 Bootstrap 面板（Panels） Bootstrap 面包屑导航（Breadcrumbs） Bootstrap 输入框组 Bootstrap 缩略图 Bootstrap 下拉菜单（Dropdowns） Bootstrap 页面标题（Page Header） Bootstrap 字体图标(Glyphicons) Bootstrap 插件 Bootstrap 按钮（Button） Bootstrap 标签页（Tab） Bootstrap 插件概览 Bootstrap 弹出框（Popover） Bootstrap 附加导航（Affix） Bootstrap 滚动监听（Scrollspy） Bootstrap 过渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 轮播（Carousel） Bootstrap 模态框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜单（Dropdown） Bootstrap 折叠（Collapse） Bootstrap 附录 Bootstrap CSS编码规范 Bootstrap HTML编码规范 Bootstrap UI 编辑器

characters

Bootstrap 字体图标(Glyphicons)

本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。

什么是字体图标？

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

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

获取字体图标

我们已经在环境安装章节下载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-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>

下面的实例演示了如何使用字体图标：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 如何使用字体图标</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

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


</body>
</html>

结果如下所示：

带有导航栏的字体图标

<!DOCTYPE html>
<html>
  <head>
    <title>导航栏的字体图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <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://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

定制字体图标

我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。

我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码：

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

图标列表

图标	类名	实例
	glyphicon glyphicon-asterisk	实例 »
	glyphicon glyphicon-plus	实例 »
	glyphicon glyphicon-minus	实例 »
	glyphicon glyphicon-euro	实例 »
	glyphicon glyphicon-cloud	实例 »
	glyphicon glyphicon-envelope	实例 »
	glyphicon glyphicon-pencil	实例 »
	glyphicon glyphicon-glass	实例 »
	glyphicon glyphicon-music	实例 »
	glyphicon glyphicon-search	实例 »
	glyphicon glyphicon-heart	实例 »
	glyphicon glyphicon-star	实例 »
	glyphicon glyphicon-star-empty	实例 »
	glyphicon glyphicon-user	实例 »
	glyphicon glyphicon-film	实例 »
	glyphicon glyphicon-th-large	实例 »
	glyphicon glyphicon-th	实例 »
	glyphicon glyphicon-th-list	实例 »
	glyphicon glyphicon-ok	实例 »
	glyphicon glyphicon-remove	实例 »
	glyphicon glyphicon-zoom-in	实例 »
	glyphicon glyphicon-zoom-out	实例 »
	glyphicon glyphicon-off	实例 »
	glyphicon glyphicon-signal	实例 »
	glyphicon glyphicon-cog	实例 »
	glyphicon glyphicon-trash	实例 »
	glyphicon glyphicon-home	实例 »
	glyphicon glyphicon-file	实例 »
	glyphicon glyphicon-time	实例 »
	glyphicon glyphicon-road	实例 »
	glyphicon glyphicon-download-alt	实例 »
	glyphicon glyphicon-download	实例 »
	glyphicon glyphicon-upload	实例 »
	glyphicon glyphicon-inbox	实例 »
	glyphicon glyphicon-play-circle	实例 »
	glyphicon glyphicon-repeat	实例 »
	glyphicon glyphicon-refresh	实例 »
	glyphicon glyphicon-list-alt	实例 »
	glyphicon glyphicon-lock	实例 »
	glyphicon glyphicon-flag	实例 »
	glyphicon glyphicon-headphones	实例 »
	glyphicon glyphicon-volume-off	实例 »
	glyphicon glyphicon-volume-down	实例 »
	glyphicon glyphicon-volume-up	实例 »
	glyphicon glyphicon-qrcode	实例 »
	glyphicon glyphicon-barcode	实例 »
	glyphicon glyphicon-tag	实例 »
	glyphicon glyphicon-tags	实例 »
	glyphicon glyphicon-book	实例 »
	glyphicon glyphicon-bookmark	实例 »
	glyphicon glyphicon-print	实例 »
	glyphicon glyphicon-camera	实例 »
	glyphicon glyphicon-font	实例 »
	glyphicon glyphicon-bold	实例 »
	glyphicon glyphicon-italic	实例 »
	glyphicon glyphicon-text-height	实例 »
	glyphicon glyphicon-text-width	实例 »
	glyphicon glyphicon-align-left	实例 »
	glyphicon glyphicon-align-center	实例 »
	glyphicon glyphicon-align-right	实例 »
	glyphicon glyphicon-align-justify	实例 »
	glyphicon glyphicon-list	实例 »
	glyphicon glyphicon-indent-left	实例 »
	glyphicon glyphicon-indent-right	实例 »
	glyphicon glyphicon-facetime-video	实例 »
	glyphicon glyphicon-picture	实例 »
	glyphicon glyphicon-map-marker	实例 »
	glyphicon glyphicon-adjust	实例 »
	glyphicon glyphicon-tint	实例 »
	glyphicon glyphicon-edit	实例 »
	glyphicon glyphicon-share	实例 »
	glyphicon glyphicon-check	实例 »
	glyphicon glyphicon-move	实例 »
	glyphicon glyphicon-step-backward	实例 »
	glyphicon glyphicon-fast-backward	实例 »
	glyphicon glyphicon-backward	实例 »
	glyphicon glyphicon-play	实例 »
	glyphicon glyphicon-pause	实例 »
	glyphicon glyphicon-stop	实例 »
	glyphicon glyphicon-forward	实例 »
	glyphicon glyphicon-fast-forward	实例 »
	glyphicon glyphicon-step-forward	实例 »
	glyphicon glyphicon-eject	实例 »
	glyphicon glyphicon-chevron-left	实例 »
	glyphicon glyphicon-chevron-right	实例 »
	glyphicon glyphicon-plus-sign	实例 »
	glyphicon glyphicon-minus-sign	实例 »
	glyphicon glyphicon-remove-sign	实例 »
	glyphicon glyphicon-ok-sign	实例 »
	glyphicon glyphicon-question-sign	实例 »
	glyphicon glyphicon-info-sign	实例 »
	glyphicon glyphicon-screenshot	实例 »
	glyphicon glyphicon-remove-circle	实例 »
	glyphicon glyphicon-ok-circle	实例 »
	glyphicon glyphicon-ban-circle	实例 »
	glyphicon glyphicon-arrow-left	实例 »
	glyphicon glyphicon-arrow-right	实例 »
	glyphicon glyphicon-arrow-up	实例 »
	glyphicon glyphicon-arrow-down	实例 »
	glyphicon glyphicon-share-alt	实例 »
	glyphicon glyphicon-resize-full	实例 »
	glyphicon glyphicon-resize-small	实例 »
	glyphicon glyphicon-exclamation-sign	实例 »
	glyphicon glyphicon-gift	实例 »
	glyphicon glyphicon-leaf	实例 »
	glyphicon glyphicon-fire	实例 »
	glyphicon glyphicon-eye-open	实例 »
	glyphicon glyphicon-eye-close	实例 »
	glyphicon glyphicon-warning-sign	实例 »
	glyphicon glyphicon-plane	实例 »
	glyphicon glyphicon-calendar	实例 »
	glyphicon glyphicon-random	实例 »
	glyphicon glyphicon-comment	实例 »
	glyphicon glyphicon-magnet	实例 »
	glyphicon glyphicon-chevron-up	实例 »
	glyphicon glyphicon-chevron-down	实例 »
	glyphicon glyphicon-retweet	实例 »
	glyphicon glyphicon-shopping-cart	实例 »
	glyphicon glyphicon-folder-close	实例 »
	glyphicon glyphicon-folder-open	实例 »
	glyphicon glyphicon-resize-vertical	实例 »
	glyphicon glyphicon-resize-horizontal	实例 »
	glyphicon glyphicon-hdd	实例 »
	glyphicon glyphicon-bullhorn	实例 »
	glyphicon glyphicon-bell	实例 »
	glyphicon glyphicon-certificate	实例 »
	glyphicon glyphicon-thumbs-up	实例 »
	glyphicon glyphicon-thumbs-down	实例 »
	glyphicon glyphicon-hand-right	实例 »
	glyphicon glyphicon-hand-left	实例 »
	glyphicon glyphicon-hand-up	实例 »
	glyphicon glyphicon-hand-down	实例 »
	glyphicon glyphicon-circle-arrow-right	实例 »
	glyphicon glyphicon-circle-arrow-left	实例 »
	glyphicon glyphicon-circle-arrow-up	实例 »
	glyphicon glyphicon-circle-arrow-down	实例 »
	glyphicon glyphicon-globe	实例 »
	glyphicon glyphicon-wrench	实例 »
	glyphicon glyphicon-tasks	实例 »
	glyphicon glyphicon-filter	实例 »
	glyphicon glyphicon-briefcase	实例 »
	glyphicon glyphicon-fullscreen	实例 »
	glyphicon glyphicon-dashboard	实例 »
	glyphicon glyphicon-paperclip	实例 »
	glyphicon glyphicon-heart-empty	实例 »
	glyphicon glyphicon-link	实例 »
	glyphicon glyphicon-phone	实例 »
	glyphicon glyphicon-pushpin	实例 »
	glyphicon glyphicon-usd	实例 »
	glyphicon glyphicon-gbp	实例 »
	glyphicon glyphicon-sort	实例 »
	glyphicon glyphicon-sort-by-alphabet	实例 »
	glyphicon glyphicon-sort-by-alphabet-alt	实例 »
	glyphicon glyphicon-sort-by-order	实例 »
	glyphicon glyphicon-sort-by-order-alt	实例 »
	glyphicon glyphicon-sort-by-attributes	实例 »
	glyphicon glyphicon-sort-by-attributes-alt	实例 »
	glyphicon glyphicon-unchecked	实例 »
	glyphicon glyphicon-expand	实例 »
	glyphicon glyphicon-collapse-down	实例 »
	glyphicon glyphicon-collapse-up	实例 »
	glyphicon glyphicon-log-in	实例 »
	glyphicon glyphicon-flash	实例 »
	glyphicon glyphicon-log-out	实例 »
	glyphicon glyphicon-new-window	实例 »
	glyphicon glyphicon-record	实例 »
	glyphicon glyphicon-save	实例 »
	glyphicon glyphicon-open	实例 »
	glyphicon glyphicon-saved	实例 »
	glyphicon glyphicon-import	实例 »
	glyphicon glyphicon-export	实例 »
	glyphicon glyphicon-send	实例 »
	glyphicon glyphicon-floppy-disk	实例 »
	glyphicon glyphicon-floppy-saved	实例 »
	glyphicon glyphicon-floppy-remove	实例 »
	glyphicon glyphicon-floppy-save	实例 »
	glyphicon glyphicon-floppy-open	实例 »
	glyphicon glyphicon-credit-card	实例 »
	glyphicon glyphicon-transfer	实例 »
	glyphicon glyphicon-cutlery	实例 »
	glyphicon glyphicon-header	实例 »
	glyphicon glyphicon-compressed	实例 »
	glyphicon glyphicon-earphone	实例 »
	glyphicon glyphicon-phone-alt	实例 »
	glyphicon glyphicon-tower	实例 »
	glyphicon glyphicon-stats	实例 »
	glyphicon glyphicon-sd-video	实例 »
	glyphicon glyphicon-hd-video	实例 »
	glyphicon glyphicon-subtitles	实例 »
	glyphicon glyphicon-sound-stereo	实例 »
	glyphicon glyphicon-sound-dolby	实例 »
	glyphicon glyphicon-sound-5-1	实例 »
	glyphicon glyphicon-sound-6-1	实例 »
	glyphicon glyphicon-sound-7-1	实例 »
	glyphicon glyphicon-copyright-mark	实例 »
	glyphicon glyphicon-registration-mark	实例 »
	glyphicon glyphicon-cloud-download	实例 »
	glyphicon glyphicon-cloud-upload	实例 »
	glyphicon glyphicon-tree-conifer	实例 »
	glyphicon glyphicon-tree-deciduous	实例 »

Previous article： Next article：