Bootstrap 字体图标(Glyphicons)

@font-face {
font-family:’Glyphicons Halflings’;src:url(https://cdn.staticfile.org/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);src:url(//cdn.staticfile.org/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix) format(’embedded-opentype’),url(//cdn.staticfile.org/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff) format(‘woff’),url(//cdn.staticfile.org/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf) format(‘truetype’),url(//cdn.staticfile.org/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(‘svg’)
}
.glyphicon{position:relative;top:1px;display:inline-block;font-family:’Glyphicons Halflings’;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:”\2a”}.glyphicon-plus:before{content:”\2b”}.glyphicon-euro:before,.glyphicon-eur:before{content:”\20ac”}.glyphicon-minus:before{content:”\2212″}.glyphicon-cloud:before{content:”\2601″}.glyphicon-envelope:before{content:”\2709″}.glyphicon-pencil:before{content:”\270f”}.glyphicon-glass:before{content:”\e001″}.glyphicon-music:before{content:”\e002″}.glyphicon-search:before{content:”\e003″}.glyphicon-heart:before{content:”\e005″}.glyphicon-star:before{content:”\e006″}.glyphicon-star-empty:before{content:”\e007″}.glyphicon-user:before{content:”\e008″}.glyphicon-film:before{content:”\e009″}.glyphicon-th-large:before{content:”\e010″}.glyphicon-th:before{content:”\e011″}.glyphicon-th-list:before{content:”\e012″}.glyphicon-ok:before{content:”\e013″}.glyphicon-remove:before{content:”\e014″}.glyphicon-zoom-in:before{content:”\e015″}.glyphicon-zoom-out:before{content:”\e016″}.glyphicon-off:before{content:”\e017″}.glyphicon-signal:before{content:”\e018″}.glyphicon-cog:before{content:”\e019″}.glyphicon-trash:before{content:”\e020″}.glyphicon-home:before{content:”\e021″}.glyphicon-file:before{content:”\e022″}.glyphicon-time:before{content:”\e023″}.glyphicon-road:before{content:”\e024″}.glyphicon-download-alt:before{content:”\e025″}.glyphicon-download:before{content:”\e026″}.glyphicon-upload:before{content:”\e027″}.glyphicon-inbox:before{content:”\e028″}.glyphicon-play-circle:before{content:”\e029″}.glyphicon-repeat:before{content:”\e030″}.glyphicon-refresh:before{content:”\e031″}.glyphicon-list-alt:before{content:”\e032″}.glyphicon-lock:before{content:”\e033″}.glyphicon-flag:before{content:”\e034″}.glyphicon-headphones:before{content:”\e035″}.glyphicon-volume-off:before{content:”\e036″}.glyphicon-volume-down:before{content:”\e037″}.glyphicon-volume-up:before{content:”\e038″}.glyphicon-qrcode:before{content:”\e039″}.glyphicon-barcode:before{content:”\e040″}.glyphicon-tag:before{content:”\e041″}.glyphicon-tags:before{content:”\e042″}.glyphicon-book:before{content:”\e043″}.glyphicon-bookmark:before{content:”\e044″}.glyphicon-print:before{content:”\e045″}.glyphicon-camera:before{content:”\e046″}.glyphicon-font:before{content:”\e047″}.glyphicon-bold:before{content:”\e048″}.glyphicon-italic:before{content:”\e049″}.glyphicon-text-height:before{content:”\e050″}.glyphicon-text-width:before{content:”\e051″}.glyphicon-align-left:before{content:”\e052″}.glyphicon-align-center:before{content:”\e053″}.glyphicon-align-right:before{content:”\e054″}.glyphicon-align-justify:before{content:”\e055″}.glyphicon-list:before{content:”\e056″}.glyphicon-indent-left:before{content:”\e057″}.glyphicon-indent-right:before{content:”\e058″}.glyphicon-facetime-video:before{content:”\e059″}.glyphicon-picture:before{content:”\e060″}.glyphicon-map-marker:before{content:”\e062″}.glyphicon-adjust:before{content:”\e063″}
.glyphicon-tint:before{content:”\e064″}.glyphicon-edit:before{content:”\e065″}.glyphicon-share:before{content:”\e066″}.glyphicon-check:before{content:”\e067″}.glyphicon-move:before{content:”\e068″}.glyphicon-step-backward:before{content:”\e069″}.glyphicon-fast-backward:before{content:”\e070″}.glyphicon-backward:before{content:”\e071″}.glyphicon-play:before{content:”\e072″}.glyphicon-pause:before{content:”\e073″}.glyphicon-stop:before{content:”\e074″}.glyphicon-forward:before{content:”\e075″}.glyphicon-fast-forward:before{content:”\e076″}.glyphicon-step-forward:before{content:”\e077″}.glyphicon-eject:before{content:”\e078″}.glyphicon-chevron-left:before{content:”\e079″}.glyphicon-chevron-right:before{content:”\e080″}.glyphicon-plus-sign:before{content:”\e081″}.glyphicon-minus-sign:before{content:”\e082″}.glyphicon-remove-sign:before{content:”\e083″}.glyphicon-ok-sign:before{content:”\e084″}.glyphicon-question-sign:before{content:”\e085″}.glyphicon-info-sign:before{content:”\e086″}.glyphicon-screenshot:before{content:”\e087″}.glyphicon-remove-circle:before{content:”\e088″}.glyphicon-ok-circle:before{content:”\e089″}.glyphicon-ban-circle:before{content:”\e090″}.glyphicon-arrow-left:before{content:”\e091″}.glyphicon-arrow-right:before{content:”\e092″}.glyphicon-arrow-up:before{content:”\e093″}.glyphicon-arrow-down:before{content:”\e094″}.glyphicon-share-alt:before{content:”\e095″}.glyphicon-resize-full:before{content:”\e096″}.glyphicon-resize-small:before{content:”\e097″}.glyphicon-exclamation-sign:before{content:”\e101″}.glyphicon-gift:before{content:”\e102″}.glyphicon-leaf:before{content:”\e103″}.glyphicon-fire:before{content:”\e104″}.glyphicon-eye-open:before{content:”\e105″}.glyphicon-eye-close:before{content:”\e106″}.glyphicon-warning-sign:before{content:”\e107″}.glyphicon-plane:before{content:”\e108″}.glyphicon-calendar:before{content:”\e109″}.glyphicon-random:before{content:”\e110″}.glyphicon-comment:before{content:”\e111″}.glyphicon-magnet:before{content:”\e112″}.glyphicon-chevron-up:before{content:”\e113″}.glyphicon-chevron-down:before{content:”\e114″}.glyphicon-retweet:before{content:”\e115″}.glyphicon-shopping-cart:before{content:”\e116″}.glyphicon-folder-close:before{content:”\e117″}.glyphicon-folder-open:before{content:”\e118″}.glyphicon-resize-vertical:before{content:”\e119″}.glyphicon-resize-horizontal:before{content:”\e120″}.glyphicon-hdd:before{content:”\e121″}.glyphicon-bullhorn:before{content:”\e122″}.glyphicon-bell:before{content:”\e123″}.glyphicon-certificate:before{content:”\e124″}.glyphicon-thumbs-up:before{content:”\e125″}.glyphicon-thumbs-down:before{content:”\e126″}.glyphicon-hand-right:before{content:”\e127″}.glyphicon-hand-left:before{content:”\e128″}.glyphicon-hand-up:before{content:”\e129″}.glyphicon-hand-down:before{content:”\e130″}.glyphicon-circle-arrow-right:before{content:”\e131″}.glyphicon-circle-arrow-left:before{content:”\e132″}.glyphicon-circle-arrow-up:before{content:”\e133″}.glyphicon-circle-arrow-down:before{content:”\e134″}
.glyphicon-globe:before{content:”\e135″}.glyphicon-wrench:before{content:”\e136″}.glyphicon-tasks:before{content:”\e137″}.glyphicon-filter:before{content:”\e138″}.glyphicon-briefcase:before{content:”\e139″}.glyphicon-fullscreen:before{content:”\e140″}.glyphicon-dashboard:before{content:”\e141″}.glyphicon-paperclip:before{content:”\e142″}.glyphicon-heart-empty:before{content:”\e143″}.glyphicon-link:before{content:”\e144″}.glyphicon-phone:before{content:”\e145″}.glyphicon-pushpin:before{content:”\e146″}.glyphicon-usd:before{content:”\e148″}.glyphicon-gbp:before{content:”\e149″}.glyphicon-sort:before{content:”\e150″}.glyphicon-sort-by-alphabet:before{content:”\e151″}.glyphicon-sort-by-alphabet-alt:before{content:”\e152″}.glyphicon-sort-by-order:before{content:”\e153″}.glyphicon-sort-by-order-alt:before{content:”\e154″}.glyphicon-sort-by-attributes:before{content:”\e155″}.glyphicon-sort-by-attributes-alt:before{content:”\e156″}.glyphicon-unchecked:before{content:”\e157″}.glyphicon-expand:before{content:”\e158″}.glyphicon-collapse-down:before{content:”\e159″}.glyphicon-collapse-up:before{content:”\e160″}.glyphicon-log-in:before{content:”\e161″}.glyphicon-flash:before{content:”\e162″}.glyphicon-log-out:before{content:”\e163″}.glyphicon-new-window:before{content:”\e164″}.glyphicon-record:before{content:”\e165″}.glyphicon-save:before{content:”\e166″}.glyphicon-open:before{content:”\e167″}.glyphicon-saved:before{content:”\e168″}.glyphicon-import:before{content:”\e169″}.glyphicon-export:before{content:”\e170″}.glyphicon-send:before{content:”\e171″}.glyphicon-floppy-disk:before{content:”\e172″}.glyphicon-floppy-saved:before{content:”\e173″}.glyphicon-floppy-remove:before{content:”\e174″}.glyphicon-floppy-save:before{content:”\e175″}.glyphicon-floppy-open:before{content:”\e176″}.glyphicon-credit-card:before{content:”\e177″}.glyphicon-transfer:before{content:”\e178″}.glyphicon-cutlery:before{content:”\e179″}.glyphicon-header:before{content:”\e180″}.glyphicon-compressed:before{content:”\e181″}.glyphicon-earphone:before{content:”\e182″}.glyphicon-phone-alt:before{content:”\e183″}.glyphicon-tower:before{content:”\e184″}.glyphicon-stats:before{content:”\e185″}.glyphicon-sd-video:before{content:”\e186″}.glyphicon-hd-video:before{content:”\e187″}.glyphicon-subtitles:before{content:”\e188″}.glyphicon-sound-stereo:before{content:”\e189″}.glyphicon-sound-dolby:before{content:”\e190″}.glyphicon-sound-5-1:before{content:”\e191″}.glyphicon-sound-6-1:before{content:”\e192″}.glyphicon-sound-7-1:before{content:”\e193″}.glyphicon-copyright-mark:before{content:”\e194″}.glyphicon-registration-mark:before{content:”\e195″}.glyphicon-cloud-download:before{content:”\e197″}.glyphicon-cloud-upload:before{content:”\e198″}.glyphicon-tree-conifer:before{content:”\e199″}.glyphicon-tree-deciduous:before{content:”\e200″}

本章将讲解字体图标(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>

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

实例

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

结果如下所示：

带有字体图标的导航栏

实例

<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="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!– 包含了所有编译插件 –>
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

定制字体图标

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

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

下面是开始的代码：

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

在线定制字体图标

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

图标列表