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";
}
用法
如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
下面的实例演示了如何使用字体图标：
Bootstrap实例-如何使用字体图标
User
User
User
尝试一下?
结果如下所示：
如何使用字体图标
带有导航栏的字体图标
导航栏的字体图标
Togglenavigation
Projectname
Home
Shop
Support
尝试一下?
定制字体图标
我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。
我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。
下面是开始的代码：
User
效果如下所示：
定制字体尺寸
通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。
User
定制字体颜色
User
应用文本阴影
User
在线定制字体图标
点击这里，定制字体图标?
图标列表
图标 类名 实例
glyphiconglyphicon-asterisk 尝试一下
glyphiconglyphicon-plus 尝试一下
glyphiconglyphicon-minus 尝试一下
glyphiconglyphicon-euro 尝试一下
glyphiconglyphicon-cloud 尝试一下
glyphiconglyphicon-envelope 尝试一下
glyphiconglyphicon-pencil 尝试一下
glyphiconglyphicon-glass 尝试一下
glyphiconglyphicon-music 尝试一下
glyphiconglyphicon-search 尝试一下
glyphiconglyphicon-heart 尝试一下
glyphiconglyphicon-star 尝试一下
glyphiconglyphicon-star-empty 尝试一下
glyphiconglyphicon-user 尝试一下
glyphiconglyphicon-film 尝试一下
glyphiconglyphicon-th-large 尝试一下
glyphiconglyphicon-th 尝试一下
glyphiconglyphicon-th-list 尝试一下
glyphiconglyphicon-ok 尝试一下
glyphiconglyphicon-remove 尝试一下
glyphiconglyphicon-zoom-in 尝试一下
glyphiconglyphicon-zoom-out 尝试一下
glyphiconglyphicon-off 尝试一下
glyphiconglyphicon-signal 尝试一下
glyphiconglyphicon-cog 尝试一下
glyphiconglyphicon-trash 尝试一下
glyphiconglyphicon-home 尝试一下
glyphiconglyphicon-file 尝试一下
glyphiconglyphicon-time 尝试一下
glyphiconglyphicon-road 尝试一下
glyphiconglyphicon-download-alt 尝试一下
glyphiconglyphicon-download 尝试一下
glyphiconglyphicon-upload 尝试一下
glyphiconglyphicon-inbox 尝试一下
glyphiconglyphicon-play-circle 尝试一下
glyphiconglyphicon-repeat 尝试一下
glyphiconglyphicon-refresh 尝试一下
glyphiconglyphicon-list-alt 尝试一下
glyphiconglyphicon-lock 尝试一下
glyphiconglyphicon-flag 尝试一下
glyphiconglyphicon-headphones 尝试一下
glyphiconglyphicon-volume-off 尝试一下
glyphiconglyphicon-volume-down 尝试一下
glyphiconglyphicon-volume-up 尝试一下
glyphiconglyphicon-qrcode 尝试一下
glyphiconglyphicon-barcode 尝试一下
glyphiconglyphicon-tag 尝试一下
glyphiconglyphicon-tags 尝试一下
glyphiconglyphicon-book 尝试一下
glyphiconglyphicon-bookmark 尝试一下
glyphiconglyphicon-print 尝试一下
glyphiconglyphicon-camera 尝试一下
glyphiconglyphicon-font 尝试一下
glyphiconglyphicon-bold 尝试一下
glyphiconglyphicon-italic 尝试一下
glyphiconglyphicon-text-height 尝试一下
glyphiconglyphicon-text-width 尝试一下
glyphiconglyphicon-align-left 尝试一下
glyphiconglyphicon-align-center 尝试一下
glyphiconglyphicon-align-right 尝试一下
glyphiconglyphicon-align-justify 尝试一下
glyphiconglyphicon-list 尝试一下
glyphiconglyphicon-indent-left 尝试一下
glyphiconglyphicon-indent-right 尝试一下
glyphiconglyphicon-facetime-video 尝试一下
glyphiconglyphicon-picture 尝试一下
glyphiconglyphicon-map-marker 尝试一下
glyphiconglyphicon-adjust 尝试一下
glyphiconglyphicon-tint 尝试一下
glyphiconglyphicon-edit 尝试一下
glyphiconglyphicon-share 尝试一下
glyphiconglyphicon-check 尝试一下
glyphiconglyphicon-move 尝试一下
glyphiconglyphicon-step-backward 尝试一下
glyphiconglyphicon-fast-backward 尝试一下
glyphiconglyphicon-backward 尝试一下
glyphiconglyphicon-play 尝试一下
glyphiconglyphicon-pause 尝试一下
glyphiconglyphicon-stop 尝试一下
glyphiconglyphicon-forward 尝试一下
glyphiconglyphicon-fast-forward 尝试一下
glyphiconglyphicon-step-forward 尝试一下
glyphiconglyphicon-eject 尝试一下
glyphiconglyphicon-chevron-left 尝试一下
glyphiconglyphicon-chevron-right 尝试一下
glyphiconglyphicon-plus-sign 尝试一下
glyphiconglyphicon-minus-sign 尝试一下
glyphiconglyphicon-remove-sign 尝试一下
glyphiconglyphicon-ok-sign 尝试一下
glyphiconglyphicon-question-sign 尝试一下
glyphiconglyphicon-info-sign 尝试一下
glyphiconglyphicon-screenshot 尝试一下
glyphiconglyphicon-remove-circle 尝试一下
glyphiconglyphicon-ok-circle 尝试一下
glyphiconglyphicon-ban-circle 尝试一下
glyphiconglyphicon-arrow-left 尝试一下
glyphiconglyphicon-arrow-right 尝试一下
glyphiconglyphicon-arrow-up 尝试一下
glyphiconglyphicon-arrow-down 尝试一下
glyphiconglyphicon-share-alt 尝试一下
glyphiconglyphicon-resize-full 尝试一下
glyphiconglyphicon-resize-small 尝试一下
glyphiconglyphicon-exclamation-sign 尝试一下
glyphiconglyphicon-gift 尝试一下
glyphiconglyphicon-leaf 尝试一下
glyphiconglyphicon-fire 尝试一下
glyphiconglyphicon-eye-open 尝试一下
glyphiconglyphicon-eye-close 尝试一下
glyphiconglyphicon-warning-sign 尝试一下
glyphiconglyphicon-plane 尝试一下
glyphiconglyphicon-calendar 尝试一下
glyphiconglyphicon-random 尝试一下
glyphiconglyphicon-comment 尝试一下
glyphiconglyphicon-magnet 尝试一下
glyphiconglyphicon-chevron-up 尝试一下
glyphiconglyphicon-chevron-down 尝试一下
glyphiconglyphicon-retweet 尝试一下
glyphiconglyphicon-shopping-cart 尝试一下
glyphiconglyphicon-folder-close 尝试一下
glyphiconglyphicon-folder-open 尝试一下
glyphiconglyphicon-resize-vertical 尝试一下
glyphiconglyphicon-resize-horizontal 尝试一下
glyphiconglyphicon-hdd 尝试一下
glyphiconglyphicon-bullhorn 尝试一下
glyphiconglyphicon-bell 尝试一下
glyphiconglyphicon-certificate 尝试一下
glyphiconglyphicon-thumbs-up 尝试一下
glyphiconglyphicon-thumbs-down 尝试一下
glyphiconglyphicon-hand-right 尝试一下
glyphiconglyphicon-hand-left 尝试一下
glyphiconglyphicon-hand-up 尝试一下
glyphiconglyphicon-hand-down 尝试一下
glyphiconglyphicon-circle-arrow-right 尝试一下
glyphiconglyphicon-circle-arrow-left 尝试一下
glyphiconglyphicon-circle-arrow-up 尝试一下
glyphiconglyphicon-circle-arrow-down 尝试一下
glyphiconglyphicon-globe 尝试一下
glyphiconglyphicon-wrench 尝试一下
glyphiconglyphicon-tasks 尝试一下
glyphiconglyphicon-filter 尝试一下
glyphiconglyphicon-briefcase 尝试一下
glyphiconglyphicon-fullscreen 尝试一下
glyphiconglyphicon-dashboard 尝试一下
glyphiconglyphicon-paperclip 尝试一下
glyphiconglyphicon-heart-empty 尝试一下
glyphiconglyphicon-link 尝试一下
glyphiconglyphicon-phone 尝试一下
glyphiconglyphicon-pushpin 尝试一下
glyphiconglyphicon-usd 尝试一下
glyphiconglyphicon-gbp 尝试一下
glyphiconglyphicon-sort 尝试一下
glyphiconglyphicon-sort-by-alphabet 尝试一下
glyphiconglyphicon-sort-by-alphabet-alt 尝试一下
glyphiconglyphicon-sort-by-order 尝试一下
glyphiconglyphicon-sort-by-order-alt 尝试一下
glyphiconglyphicon-sort-by-attributes 尝试一下
glyphiconglyphicon-sort-by-attributes-alt 尝试一下
glyphiconglyphicon-unchecked 尝试一下
glyphiconglyphicon-expand 尝试一下
glyphiconglyphicon-collapse-down 尝试一下
glyphiconglyphicon-collapse-up 尝试一下
glyphiconglyphicon-log-in 尝试一下
glyphiconglyphicon-flash 尝试一下
glyphiconglyphicon-log-out 尝试一下
glyphiconglyphicon-new-window 尝试一下
glyphiconglyphicon-record 尝试一下
glyphiconglyphicon-save 尝试一下
glyphiconglyphicon-open 尝试一下
glyphiconglyphicon-saved 尝试一下
glyphiconglyphicon-import 尝试一下
glyphiconglyphicon-export 尝试一下
glyphiconglyphicon-send 尝试一下
glyphiconglyphicon-floppy-disk 尝试一下
glyphiconglyphicon-floppy-saved 尝试一下
glyphiconglyphicon-floppy-remove 尝试一下
glyphiconglyphicon-floppy-save 尝试一下
glyphiconglyphicon-floppy-open 尝试一下
glyphiconglyphicon-credit-card 尝试一下
glyphiconglyphicon-transfer 尝试一下
glyphiconglyphicon-cutlery 尝试一下
glyphiconglyphicon-header 尝试一下
glyphiconglyphicon-compressed 尝试一下
glyphiconglyphicon-earphone 尝试一下
glyphiconglyphicon-phone-alt 尝试一下
glyphiconglyphicon-tower 尝试一下
glyphiconglyphicon-stats 尝试一下
glyphiconglyphicon-sd-video 尝试一下
glyphiconglyphicon-hd-video 尝试一下
glyphiconglyphicon-subtitles 尝试一下
glyphiconglyphicon-sound-stereo 尝试一下
glyphiconglyphicon-sound-dolby 尝试一下
glyphiconglyphicon-sound-5-1 尝试一下
glyphiconglyphicon-sound-6-1 尝试一下
glyphiconglyphicon-sound-7-1 尝试一下
glyphiconglyphicon-copyright-mark 尝试一下
glyphiconglyphicon-registration-mark 尝试一下
glyphiconglyphicon-cloud-download 尝试一下
glyphiconglyphicon-cloud-upload 尝试一下
glyphiconglyphicon-tree-conifer 尝试一下
glyphiconglyphicon-tree-deciduous 尝试一下
|
|
