Bootstrap 教程
Bootstrap 教程
  1. Bootstrap 教程
    1. Bootstrap 教程导读
    2. Bootstrap 简介
    3. Bootstrap 环境安装
    4. Bootstrap 编程实战闯关
  2. Bootstrap CSS
    1. Bootstrap CSS 概览
    2. Bootstrap 网格系统
    3. Bootstrap 排版
    4. Bootstrap 代码
    5. Bootstrap 表格
    6. Bootstrap 表单
    7. Bootstrap 按钮
    8. Bootstrap 图片
    9. Bootstrap 辅助类
    10. Bootstrap 响应式实用工具
  3. Bootstrap 布局组件
    1. Bootstrap 字体图标
    2. Bootstrap 下拉菜单
    3. Bootstrap 按钮组
    4. Bootstrap 按钮下拉菜单
    5. Bootstrap 输入框组
    6. Bootstrap 导航元素
    7. Bootstrap 导航栏
    8. Bootstrap 面包屑导航
    9. Bootstrap 分页
    10. Bootstrap 标签
    11. Bootstrap 徽章
    12. Bootstrap 超大屏幕
    13. Bootstrap 页面标题
    14. Bootstrap 缩略图
    15. Bootstrap 警告
    16. Bootstrap 进度条
    17. Bootstrap 多媒体对象
    18. Bootstrap 列表组
    19. Bootstrap 面板
    20. Bootstrap Well
  4. Bootstrap 插件
    1. Bootstrap 插件概览
    2. Bootstrap 过渡效果（Transition）插件
    3. Bootstrap 模态框（Modal）插件
    4. Bootstrap 下拉菜单（Dropdown）插件
    5. Bootstrap 滚动监听（Scrollspy）插件
    6. Bootstrap 标签页（Tab）插件
    7. Bootstrap 提示工具（Tooltip）插件
    8. Bootstrap 弹出框（Popover）插件
    9. Bootstrap 警告框
    10. Bootstrap 按钮（Button）插件
    11. Bootstrap 折叠（Collapse）插件
    12. Bootstrap 轮播（Carousel）插件
    13. Bootstrap 附加导航（Affix）插件
  5. Bootstrap 其他
    1. Bootstrap UI 编辑器
    2. Bootstrap v2 教程
    3. Bootstrap HTML编码规范
    4. Bootstrap CSS编码规范
  6. Bootstrap 相关教程
    1. Bootstrap 入门教程
  7. Bootstrap 版本更新
    1. Bootstrap4 首个Beta版发布：距上次发布已7月之久！
    2. Bootstrap v4.0.0-beta.2 发布，Web 前端 UI 框架
阅读(108.6k) 书签 赞(24) 我要纠错

Bootstrap 字体图标

2022-05-21 15:18 更新

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; 获得跨浏览器的一致性。

提示：-webkit-font-smoothing和-moz-osx-font-smoothing属性可以使页面上的字体反锯齿，使用后字体看起来会更清晰舒服。

然后，这里的

.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="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" ></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="//apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" ></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="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
    <!-- 包含了所有编译插件 -->
    <script src="//apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js" rel="external nofollow" ></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

在线定制字体图标

图标列表

图标类名实例
ico_list.jpgglyphicon 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尝试一下
以上内容是否对您有帮助：
← Bootstrap 响应式实用工具
Bootstrap 下拉菜单 →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号