本章介绍Bootstrap Glyphicons(Components)的用法.假设自定义是CSS类名,我们在其中定义了大小和颜色,如下面给出的示例所示.
<html> <head> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <i.custom {font-size: 2em; color: blue;}> </head> <body> <i class = "glyphicon glyphicon-tree-deciduous custom"></i> </body> </html>
下表包含Bootstrap Glyphicons(Components)的用法和结果.替换<身体>上面程序的标签,用表中给出的代码得到相应的输出 :
$b$ b
用法 | 结果 |
---|---|
< i class ="glyphicon glyphicon -asterisk custom"></i> | |
< i class ="glyphicon glyphicon-plus custom"></i> | |
< i class ="glyphicon glyphicon-euro custom"> </i> | |
< i class ="glyphicon glyphicon-minus custom"></i> | |
< i class ="glyphicon glyphicon-cloud custom"></i> | |
< i class ="glyphicon glyphicon-envelope custom"></i> | |
< i class ="glyphicon glyphicon-pencil custom"></i> | |
< i class ="glyphicon glyphicon-glass custom"></i> | |
< i class ="glyphicon glyphicon-music custom"> ;</i> | |
< i class ="glyphicon glyphicon-search custom"></i> | |
< i class ="glyphicon glyphicon-heart custom"></i> | |
< IC lass ="glyphicon glyphicon-star custom"></i> | |
< i class ="glyphicon glyphicon-star-empty custom"></i> | |
< i class = "glyphicon glyphicon-user custom"></i> | |
< i class ="glyphicon glyphicon-film custom"></i> | |
< i class ="glyphicon glyphicon-th-大型自定义"></i> | |
< i class ="glyphicon glyphicon-th custom"></i> | |
< i class ="glyphicon glyphicon-th-list custom "& gt;</i> | |
< i class ="glyphicon glyphicon-ok custom"></i> | |
< i class ="glyphicon glyphicon-remove custom"></i> | |
< i class ="glyphicon glyphicon-zoom-in custom"></i> | |
< i class ="glyphicon glyphicon-zoom-out custom"></i> | |
< i class ="glyphicon glyphicon-off custom"></i> | |
< i class ="glyphicon glyphicon-signal custom"></i> | |
< i class ="glyphicon glyphicon-cog custom"> ;</i> | |
< i class ="glyphicon glyphicon-trash custom"></i> | |
< i class ="glyphicon glyphicon-home custom"></i> | |
< i class ="glyphicon glyphicon-file custom"></i> | |
< i class ="glyphicon glyphicon-time custom"></i> | |
< i class ="glyphicon glyphicon-road custom"></i> | |
< i class ="glyphicon glyphicon-download-alt custom"></i> | |
< i class ="glyphicon glyphicon-download custom"> </i> | |
< i class ="glyphicon glyphicon-upload custom"></i> | |
< i class ="glyphicon glyphicon-inbox custom"></i> | |
< i class ="glyphicon glyphicon-play-circle custom"></i> | |
< i class ="glyphicon glyphicon-repeat custom"></i> | |
< i class ="glyphicon glyphicon-refresh custom"></i> | |
< i class ="glyphicon glyphicon-list-alt custom"></i> | |
< i class ="glyphicon glyphicon-lock custom"></i> | |
< i class ="glyphicon glyphicon-flag custom"></i> | |
< i class = "glyphicon glyphicon-headphones custom"></i> | |
< i class ="glyphicon glyphicon-volume-off custom"></i> | |
< i class ="gly phicon glyphicon-volume-down custom"></i> | |
< i class ="glyphicon glyphicon-volume-up custom"></i> | |
< i class ="glyphicon glyphicon-qrcode custom"></i> | |
< i class ="glyphicon glyphicon-barcode custom"></i> | |
< i class ="glyphicon glyphicon-tag自定义"></i> | |
< i class ="glyphicon glyphicon-tags custom"></i> | |
< i class ="glyphicon glyphicon-book cust om"></i> | |
< i class ="glyphicon glyphicon-bookmark custom"></i> | |
< i class ="glyphicon glyphicon-print custom"></i> | |
< i class ="glyphicon glyphicon-camera custom"></i> | |
< i class ="glyphicon glyphicon-font custom"></i> | |
< i class ="glyphicon glyphicon-bold custom"></i> | |
< i class ="glyphicon glyphicon-italic custom"></i> | |
< i class ="glyphicon glyphicon-text-height custom "></i> | |
< i class ="glyphicon glyphicon-text-width custom"></i> | |
< i class ="glyphicon glyphicon-align-左自定义"></i> | |
< i class ="glyphicon glyphicon-align-center custom"></i> | |
< i class ="glyphicon glyphicon- align-right custom"></i> | |
< i class ="glyphicon glyphicon-align-justify custom"></i> | |
< i class ="glyphicon glyphicon-list custom"></i> | |
< i class ="glyphicon glyphicon-indent-left custom"></i> | |
< i class ="glyphicon glyphicon-indent-right custom"></i> | |
< i class ="glyphicon glyphicon-facetime-video custom"></i> | |
< i class ="glyphicon glyphicon-picture custom"></i> | |
< i class ="glyphicon glyphicon-map-marker custom">& lt;/i> | |
< i class ="glyphicon glyphicon-adjust custom"></i> | |
< i class ="glyphicon glyphicon-tint custom"></i> ; | |
< i class ="glyphicon glyphicon-edit custom"></i> | |
< i class ="glyphicon glyphicon-share custom"></i> | |
< i class ="glyphicon glyphicon-check custom"></i> | |
< i class ="glyphicon glyphicon-move custom"></i> | |
< i class ="glyphicon glyphicon-step-backward custom" ></i> | |
< i class ="glyphicon glyphicon-fast-backward custom"></i> | |
< i class ="glyphicon glyphicon-backward custom" ></i> | |
< i class ="glyphicon glyphicon-play custom"></i> | |
< i class ="glyphicon glyphicon-pause custom"></i> ; | |
< i class ="glyphicon glyphicon-stop custom"></i> | |
< i class ="glyphicon glyphicon-forward custom"></i> | |
< i class ="glyphicon glyphicon-fast-forward custom"></i> | |
< i class ="glyphicon glyphicon-step-forward custom"></i> | |
< i class ="glyphicon glyphicon-eject custom"></i> | |
< i class ="glyphicon glyphicon-chevron-left custom"></i> ; | |
< i class ="glyphicon glyphicon-chevron-right custom"></i> | |
< i class ="glyphicon glyphicon-plus-sign自定义"></i> | |
< i class ="glyphicon glyphicon-minus-sign custom"></i> | |
< i class ="glyphicon glyphicon-remove -sign custom"></i> | |
< i class ="glyphicon glyphicon-ok-sign custom"></i> | |
< i class ="glyphicon glyphicon -question-sign custom"></i> | |
< i class ="glyphicon glyphicon-info-sign custom"></i> | |
< i class ="glyphicon glyphicon-screenshot自定义"></i> | |
< i class ="glyphicon glyphicon-remove-circle custom"></i> | |
< i class ="glyphicon glyphicon-ok-circle自定义"></i> | |
< i class ="glyphicon glyphicon-ban-circle custom"></i> | |
< i class ="glyphicon glyphicon-arrow -left custom"></i> | |
< i class ="glyphicon glyphicon-arrow-right custom"></i> | |
< i class ="glyphicon glyphicon-arrow-up custom"></i> | |
< i class ="glyphicon glyphicon-arrow-down custom"></i> | |
< i class ="glyphicon glyphicon-share-alt custom"></i> | |
< i class ="glyphicon glyphicon-resize-full custom"></i> | |
< i class ="glyphicon glyphicon-resize-small custom"></i> | |
< i class ="glyphicon glyphicon-exclamation-sign custom "></i> | |
< i class ="glyphicon glyphicon-gift custom"></i> | |
< i class ="glyphicon glyphicon-leaf custom">< ;/i> | |
< i class ="glyphicon glyphicon-fire custom"></i> | |
< i class ="glyphicon glyphicon-eye-open custom"></i> | |
< i class ="glyphicon glyphicon-eye-close custom"></i> | |
< i class ="glyphicon glyphicon-warning-sign custom"></I> | |
< i class ="glyphicon glyphicon-plane custom"></i> | |
< i class ="glyphicon glyphicon-calendar custom"></i> | |
< i class = "glyphicon glyphicon-random custom"></i> | |
< i class ="glyphicon glyphicon-comment custom"></i> | |
< i class ="glyphicon glyphicon-magnet custom "></i> | |
< i class ="glyphicon glyphicon-chevron-up custom"></i> | |
< i class ="glyphicon glyphicon-chevron-自定义"></i> | |
< i class ="glyphicon glyphicon-retweet custom"></i> | |
< i class ="glyphicon glyphicon-shopping-cart custom "></i> | |
< i class ="glyphicon glyphicon-folder-close custom"></i> | |
< i class ="glyphicon glyphicon-folder-打开自定义"></i> | |
< i class ="glyphicon glyphicon-resize-vertical custom"></i > | |
< i class ="glyphicon glyphicon-resize-horizontal custom"></i> | |
< i class ="glyphicon glyphicon-hdd custom"></i> | |
< i class ="glyphicon glyphicon-bullhorn custom"></i> | |
< i class ="glyphicon glyphicon-bell custom"></i> | |
< ; i class ="glyphicon glyphicon-certificate custom"></i> | |
< i class ="glyphicon glyphicon-thumbs-up custom">&l t;/i> | |
< i class ="glyphicon glyphicon-thumbs-down custom"></i> | |
< i class ="glyphicon glyphicon-hand-right custom" ></i> | |
< i class ="glyphicon glyphicon-hand-left custom"></i> | |
< i class ="glyphicon glyphicon-hand-up自定义"></i> | |
< i class ="glyphicon glyphicon-hand-down custom"></i> | |
< i class ="glyphicon glyphicon-circle - 箭头向右自定义"></i> | |
< i class ="glyphicon glyphicon-circle-arrow-left custom"></i> | |
< i class ="glyphicon glyphicon-circle-arrow-up custom"></i> | |
< i class ="glyphicon glyphicon-circle-arrow-down custom"></i> | |
< i class ="glyphicon glyphicon-globe custom"></i> | |
< i class ="glyphicon glyphicon-wrench custom"></i> | |
&L t; i class ="glyphicon glyphicon-tasks custom"></i> | |
< i class ="glyphicon glyphicon-filter custom"></i> | |
< i class =" glyphicon glyphicon-briefcase custom"></i> | |
< i class ="glyphicon glyphicon-fullscreen custom"></i> | |
< i class ="glyphicon glyphicon-dashboard custom" ></i> | |
< i class ="glyphicon glyphicon-paperclip custom"></i> | |
< i class = "glyphicon glyphicon-heart-empty custom"></i> | |
< i class ="glyphicon glyphicon-link custom"></i> | |
< i class ="glyphicon glyphicon-phone custom"></i> | |
< i class ="glyphicon glyphicon-pushpin custom"></i> | |
< i class ="glyphicon glyphicon-usd custom"> ;</i> | |
< i class ="glyphicon glyphicon-gbp custom"></i> | |
< i class ="glyphicon glyphicon-sort custom">< ;/i> | |
< i class ="glyphicon glyphicon-sort-by-alphabet custom"></i> | |
< i class ="glyphicon glyphicon-sort-by- alphabet-alt custom"></i> | |
< i class ="glyphicon glyphicon-sort-by-order custom"></i> | |
< i class ="glyphicon glyphicon-sort-by-order-alt custom"></i> | |
< i class ="glyphicon glyphicon-sort-by-attributes custom "></i> | |
< i class ="glyphicon glyphicon-sort-by-attributes-alt custom"></i> | |
< i class ="glyphicon glyphicon-unchecked custom"></i> | |
< i class ="glyphicon glyphicon-expand custom"></i> | |
< i class ="glyphicon glyphicon-折叠自定义"></i> | |
< i class ="glyphicon glyphicon-collapse-up custom"></i> | |
< i class ="glyphicon glyphicon-log-in custom"></i> | |
< i class ="glyphicon glyphicon-flash custom"></我> | |
< i class ="glyphicon glyphicon-log-out custom"></i> | |
< i class ="glyphicon glyphicon-new-window custom"></我> | |
< i class ="glyphicon glyphicon-record custom"></i> | |
< i class ="glyphicon glyphicon-save custom"></i> | |
< i class ="glyphicon glyphicon-open custom"></i> | |
< i class ="glyphicon glyphicon-saved custom"></i> | |
< i class ="glyphicon glyphicon-import custom"></i> | |
< i class ="glyphicon glyphicon-export custom"></i> | |
< i class ="glyphicon glyphicon-send custom"></i> | |
< i class ="glyphicon glyphicon-floppy-disk custom"></i> | |
< i class ="glyphicon glyphicon-floppy-saved custom"></i> | |
< ;一世 class ="glyphicon glyphicon-floppy-remove custom"></i> | |
< i class ="glyphicon glyphicon-floppy-save custom"></i> | |
< ; i class ="glyphicon glyphicon-floppy-open custom"></i> | |
< i class ="glyphicon glyphicon-credit-card custom"></i> | |
< i class ="glyphicon glyphicon-transfer custom"></i> | |
< i class ="glyphicon glyphicon-cutlery custom"></i> | |
< i class ="glyphicon glyphicon-header custom"></i> | |
< i class ="glyphicon glyphicon-compressed custom"></i> | |
<i class="glyphicon glyphicon-earphone custom"></i> | |
<i class="glyphicon glyphicon-phone custom"></i> | |
<i class="glyphicon glyphicon-tower custom"></i> | |
<i class="glyphicon glyphicon-stats custom"></i> | |
<i class="g lyphicon glyphicon-sd-video custom"></i> | |
<i class="glyphicon glyphicon-hd-video custom"></i> | |
<i class="glyphicon glyphicon-subtitles custom"></i> | |
<i class="glyphicon glyphicon-sound-stereo custom"></i> | |
<i class="glyphicon glyphicon-sound-dolby custom"></i> | |
<i class="glyphicon glyphicon-sound-5-1 custom"></i> | |
<i class="glyphicon glyphicon-sound-6-1 custom"></i> | |
<i class="glyphicon glyphicon-sound-7-1 custom"></i> | |
<i class="glyphicon glyphicon-copyright-mark custom"></i> | |
<i class="glyphicon glyphicon-registration-mark custom"></i> | |
<i class="glyphicon glyphicon-cloud-download custom"></i> | |
<i class="glyphicon glyphicon-cloud-upload custom"></i> | |
<i class="glyphicon glyphicon-tree-conifer custom"></i> | |
<i class="glyphicon glyphicon-tree-deciduous custom"></i> |