Bootstrap 字体图标(Glyphicons) - 菜鸟教程

Bootstrap 字体图标(Glyphicons) @font-face { font-family:'Glyphicons Halflings' ... 菜鸟教程--学的不仅是技术，更是梦想！ 首页 HTML CSS JavaScript Vue Bootstrap NodeJS Python3 Python2 Java C C++ C# Go SQL Linux jQuery 本地书签 首页 HTML CSS JS 本地书签 Search Python3教程 Python2教程 Vue3教程 vue2教程 Bootstrap3教程 Bootstrap4教程 Bootstrap5教程 Bootstrap2教程 Bootstrap教程 Bootstrap教程 Bootstrap简介 Bootstrap环境安装 BootstrapCSS BootstrapCSS概览 Bootstrap网格系统 Bootstrap排版 Bootstrap代码 Bootstrap表格 Bootstrap表单 Bootstrap按钮 Bootstrap图片 Bootstrap辅助类 Bootstrap响应式实用工具 Bootstrap布局组件 Bootstrap字体图标 Bootstrap下拉菜单 Bootstrap按钮组 Bootstrap按钮下拉菜单 Bootstrap输入框组 Bootstrap导航元素 Bootstrap导航栏 Bootstrap面包屑导航 Bootstrap分页 Bootstrap标签 Bootstrap徽章 Bootstrap超大屏幕 Bootstrap页面标题 Bootstrap缩略图 Bootstrap警告 Bootstrap进度条 Bootstrap多媒体对象 Bootstrap列表组 Bootstrap面板 BootstrapWells Bootstrap创建一个网页 Bootstrap插件 Bootstrap插件概览 Bootstrap过渡效果 Bootstrap模态框 Bootstrap下拉菜单 Bootstrap滚动监听 Bootstrap标签页 Bootstrap提示工具 Bootstrap弹出框 Bootstrap警告框 Bootstrap按钮 Bootstrap折叠 Bootstrap轮播 Bootstrap附加导航 Bootstrap其他 BootstrapUI编辑器 Bootstrapv2教程 BootstrapHTML编码规范 BootstrapCSS编码规范 Bootstrap可视化布局 Less教程 Bootstrap响应式实用工具 Bootstrap下拉菜单 Bootstrap字体图标(Glyphicons) 本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。

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

首先让我们先来理解一下什么是字体图标。

什么是字体图标？ 字体图标是在Web项目中使用的图标字体。

虽然，GlyphiconsHalflings需要商业许可，但是您可以通过基于项目的Bootstrap来免费使用这些图标。

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

获取字体图标 我们已经在环境安装章节下载了Bootstrap3.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规则构成glyphiconclass。

@font-face{ font-family:'GlyphiconsHalflings'; 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:'GlyphiconsHalflings'; -webkit-font-smoothing:antialiased; font-style:normal; font-weight:normal; line-height:1; -moz-osx-font-smoothing:grayscale; } 所以font-face规则实际上是在找到glyphicons地方声明font-family和位置。

.glyphiconclass声明一个从顶部偏移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"; } 用法 如需使用图标，只需要简单地使用下面的代码即可。

请在图标和文本之间保留适当的空间。

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