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 规则实际上是在找到 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>
下é�¢çš„实例演示了如何使用å—ä½“å›¾æ ‡ï¼š
实例
�试一下 »
结果如下所示:
带有å—ä½“å›¾æ ‡çš„å¯¼èˆªæ �
实例
�试一下 »
定制å—ä½“å›¾æ ‡
我们已ç»�看到如何使用å—ä½“å›¾æ ‡ï¼ŒæŽ¥ä¸‹æ�¥æˆ‘们看看如何定制å—ä½“å›¾æ ‡ã€‚
我们将以上é�¢çš„实例开始,并通过改å�˜å—体尺寸ã€�颜色和应用文本阴影æ�¥è¿›è¡Œå®šåˆ¶å›¾æ ‡ã€‚
下é�¢æ˜¯å¼€å§‹çš„代ç �:
<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>
在线定制å—ä½“å›¾æ ‡
点击这里,定制å—ä½“å›¾æ ‡ »
å›¾æ ‡åˆ—è¡¨
| å›¾æ ‡ | ç±»å�� | 实例 |
|---|---|---|
| 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 | �试一下 |
点我分享笔记