Bootstrap3参考手册
目录搜索
Bootstrap 基础教程Bootstrap 环境安装Bootstrap 教程Bootstrap CSSBootstrap CSS 概览Bootstrap 按钮Bootstrap 表单Bootstrap 表格Bootstrap 代码Bootstrap 辅助类Bootstrap 排版Bootstrap 图片Bootstrap 网格系统Bootstrap 网格系统实例：堆叠的水平Bootstrap 网格系统实例：手机、平板电脑、台式电脑Bootstrap 网格系统实例：中型和大型设备Bootstrap 响应式实用工具Bootstrap 布局组件Bootstrap WellBootstrap 按钮下拉菜单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 编辑器

©
本文档使用 php.cn手册 发布

文字

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 实例 »
上一篇：下一篇：