Bootstrap3 教程

Bootstrap 基础教程

Bootstrap 创建一个网页
Bootstrap 列表组
Bootstrap 面板
Bootstrap 多媒体对象
Bootstrap 徽章
Bootstrap 页面标题
Bootstrap 标签
Bootstrap 缩略图
Bootstrap 超大屏幕
Bootstrap Well
Bootstrap 警告
Bootstrap 按钮下拉菜单
Bootstrap 导航元素
Bootstrap 输入框组
Bootstrap 进度条
Bootstrap 按钮组
Bootstrap 下拉菜单
Bootstrap 字体图标(Glyphicons)
Bootstrap 响应式实用工具
Bootstrap 辅助类
Bootstrap 面包屑导航
Bootstrap 导航栏
Bootstrap 表格
Bootstrap 代码
Bootstrap 分页
Bootstrap 网格系统
Bootstrap 图片
Bootstrap 按钮
Bootstrap 入门
Bootstrap 表单
Bootstrap CSS 介绍
Bootstrap 环境配置
Bootstrap 排版
Bootstrap 网格系统实例：中型和大型设备
Bootstrap 网格系统实例：手机、平板电脑、台式电脑
Bootstrap 网格系统实例：堆叠的水平

Bootstrap 插件

Bootstrap CSS编码规范
Bootstrap HTML编码规范
Bootstrap 轮播（Carousel）插件
Bootstrap 按钮（Button）插件
Bootstrap 提示工具（Tooltip）插件
Bootstrap 滚动监听（Scrollspy）插件
Bootstrap 下拉菜单（Dropdown）插件
Bootstrap 插件简介
Bootstrap 折叠（Collapse）插件
Bootstrap 模态框（Modal）插件
Bootstrap 警告框（Alert）插件
Bootstrap 弹出框（Popover）插件
Bootstrap 标签页（Tab）插件
Bootstrap 过渡效果（Transition）插件
当前位置： 首页 HTML/CSS Bootstrap3 教程 Bootstrap 基础教程

Bootstrap 字体图标(Glyphicons)

由网友 大卫 发布 阅读 10

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。

结果如下所示：

如何使用字体图标

带有字体图标的导航栏

在线示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>导航栏的字形图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<style>
 body {
	padding-top: 50px;
    padding-left: 50px;
}
</style>
<!--[if lt IE 9]>
	<script src="https://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="/bootstrap-jichujiaocheng/c740.html">Project name</a>
		</div>
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="/bootstrap-jichujiaocheng/c740.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
				<li><a href="/bootstrap-jichujiaocheng/c740.htmlshop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
				<li><a href="/bootstrap-jichujiaocheng/c740.htmlsupport"><span class="glyphicon glyphicon-headphones"></span> Support</a></li>
			</ul>
		</div><!-- /.nav-collapse -->
	</div><!-- /.container -->
</div>
<!-- jQuery (Bootstrap 插件需要引入) -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
</body>
</html>
测试看看 ‹/›

定制字体图标

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

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

下面是开始的代码：

<button type="button">
  <span></span> User
</button>

效果如下所示：

图片.png

定制字体尺寸

通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。

<button type="button" style="font-size: 60px">
  <span></span> User
</button>

图片.png

定制字体颜色

<button type="button" style="color: rgb(212, 106, 64);">
  <span></span> User
</button>

图片.png

应用文本阴影

<button type="button" style="text-shadow: black 5px 3px 3px;">
  <span></span> User
</button>

图片.png

在线定制字体图标

点击这里，定制字体图标 »

图标列表

图标类名实例

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尝试一下

Bootstrap 下拉菜单 Bootstrap 响应式实用工具