引导组件

本章介绍 Bootstrap Glyphicons（组件）的用法。假设custom是我们定义大小和颜色的 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（组件）的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -

用法 结果
<i class="glyphicon glyphicon-asterisk 自定义"></i>
<i class="glyphicon glyphicon-plus custom"></i>
<i class="glyphicon glyphicon-欧元自定义"></i>
<i class="glyphicon glyphicon-minus 自定义"></i>
<i class="glyphicon glyphicon-cloud 自定义"></i>
<i class="glyphicon glyphicon-envelope custom"></i>
<i class="glyphicon glyphicon-pencil 自定义"></i>
<i class="glyphicon glyphicon-glass 自定义"></i>
<i class="glyphicon glyphicon-音乐自定义"></i>
<i class="glyphicon glyphicon-搜索自定义"></i>
<i class="glyphicon glyphicon-heart 自定义"></i>
<i class="glyphicon glyphicon-star 自定义"></i>
<i class="glyphicon glyphicon-star-empty custom"></i>
<i class="glyphicon glyphicon-用户自定义"></i>
<i class="glyphicon glyphicon-film custom"></i>
<i class="glyphicon glyphicon-th-large 自定义"></i>
<i class="glyphicon glyphicon-th 自定义"></i>
<i class="glyphicon glyphicon-th-list 自定义"></i>
<i class="glyphicon glyphicon-ok 自定义"></i>
<i class="glyphicon glyphicon-删除自定义"></i>
<i class="glyphicon glyphicon-zoom-in 自定义"></i>
<i class="glyphicon glyphicon-zoom-out 自定义"></i>
<i class="glyphicon glyphicon-off 自定义"></i>
<i class="glyphicon glyphicon-信号自定义"></i>
<i class="glyphicon glyphicon-cog 自定义"></i>
<i class="glyphicon glyphicon-trash 自定义"></i>
<i class="glyphicon glyphicon-home 自定义"></i>
<i class="glyphicon glyphicon 文件自定义"></i>
<i class="glyphicon glyphicon-time 自定义"></i>
<i class="glyphicon glyphicon-road custom"></i>
<i class="glyphicon glyphicon-download-alt 自定义"></i>
<i class="glyphicon glyphicon-download 自定义"></i>
<i class="glyphicon glyphicon-upload 自定义"></i>
<i class="glyphicon glyphicon-inbox 自定义"></i>
<i class="glyphicon glyphicon-play-circle 自定义"></i>
<i class="glyphicon glyphicon-repeat 自定义"></i>
<i class="glyphicon glyphicon-refresh custom"></i>
<i class="glyphicon glyphicon-list-alt 自定义"></i>
<i class="glyphicon glyphicon-lock 自定义"></i>
<i class="glyphicon glyphicon-flag 自定义"></i>
<i class="glyphicon glyphicon-headphones 自定义"></i>
<i class="glyphicon glyphicon-volume-off 自定义"></i>
<i class="glyphicon glyphicon-volume-down 自定义"></i>
<i class="glyphicon glyphicon-volume-up 自定义"></i>
<i class="glyphicon glyphicon-qrcode 自定义"></i>
<i class="glyphicon glyphicon-条形码自定义"></i>
<i class="glyphicon glyphicon-tag 自定义"></i>
<i class="glyphicon glyphicon-tags 自定义"></i>
<i class="glyphicon glyphicon-book 自定义"></i>
<i class="glyphicon glyphicon-书签自定义"></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 自定义"></i>
<i class="glyphicon glyphicon-italic custom"></i>
<i class="glyphicon glyphicon-text-height 自定义"></i>
<i class="glyphicon glyphicon-text-width 自定义"></i>
<i class="glyphicon glyphicon-align-left 自定义"></i>
<i class="glyphicon glyphicon-align-center 自定义"></i>
<i class="glyphicon glyphicon-align-right 自定义"></i>
<i class="glyphicon glyphicon-align-justify 自定义"></i>
<i class="glyphicon glyphicon-list 自定义"></i>
<i class="glyphicon glyphicon-indent-left 自定义"></i>
<i class="glyphicon glyphicon-indent-right 自定义"></i>
<i class="glyphicon glyphicon-facetime-video 自定义"></i>
<i class="glyphicon glyphicon-picture 自定义"></i>
<i class="glyphicon glyphicon-map-marker 自定义"></i>
<i class="glyphicon glyphicon-调整自定义"></i>
<i class="glyphicon glyphicon-tint 自定义"></i>
<i class="glyphicon glyphicon-edit custom"></i>
<i class="glyphicon glyphicon-share custom"></i>
<i class="glyphicon glyphicon-check 自定义"></i>
<i class="glyphicon glyphicon-move 自定义"></i>
<i class="glyphicon glyphicon-step-backward 自定义"></i>
<i class="glyphicon glyphicon-fast-backward 自定义"></i>
<i class="glyphicon glyphicon-backward custom"></i>
<i class="glyphicon glyphicon-play 自定义"></i>
<i class="glyphicon glyphicon-pause 自定义"></i>
<i class="glyphicon glyphicon-stop 自定义"></i>
<i class="glyphicon glyphicon-forward 自定义"></i>
<i class="glyphicon glyphicon-fast-forward custom"></i>
<i class="glyphicon glyphicon-step-forward 自定义"></i>
<i class="glyphicon glyphicon-eject 自定义"></i>
<i class="glyphicon glyphicon-chevron-left custom"></i>
<i class="glyphicon glyphicon-chevron-right 自定义"></i>
<i class="glyphicon glyphicon-plus-sign custom"></i>
<i class="glyphicon glyphicon-minus-sign 自定义"></i>
<i class="glyphicon glyphicon-remove-sign 自定义"></i>
<i class="glyphicon glyphicon-ok-sign 自定义"></i>
<i class="glyphicon glyphicon-question-sign custom"></i>
<i class="glyphicon glyphicon-info-sign 自定义"></i>
<i class="glyphicon glyphicon-screenshot 自定义"></i>
<i class="glyphicon glyphicon-remove-circle 自定义"></i>
<i class="glyphicon glyphicon-ok-circle 自定义"></i>
<i class="glyphicon glyphicon-ban-circle 自定义"></i>
<i class="glyphicon glyphicon-arrow-left 自定义"></i>
<i class="glyphicon glyphicon-arrow-right 自定义"></i>
<i class="glyphicon glyphicon-arrow-up custom"></i>
<i class="glyphicon glyphicon-arrow-down 自定义"></i>
<i class="glyphicon glyphicon-share-alt 自定义"></i>
<i class="glyphicon glyphicon-resize-full 自定义"></i>
<i class="glyphicon glyphicon-resize-small 自定义"></i>
<i class="glyphicon glyphicon-exclamation-sign custom"></i>
<i class="glyphicon glyphicon-gift 自定义"></i>
<i class="glyphicon glyphicon-leaf 自定义"></i>
<i class="glyphicon glyphicon-fire 自定义"></i>
<i class="glyphicon glyphicon-eye-open 自定义"></i>
<i class="glyphicon glyphicon-eye-close 自定义"></i>
<i class="glyphicon glyphicon-warning-sign 自定义"></i>
<i class="glyphicon glyphicon-plane 自定义"></i>
<i class="glyphicon glyphicon-日历自定义"></i>
<i class="glyphicon glyphicon-random 自定义"></i>
<i class="glyphicon glyphicon-comment 自定义"></i>
<i class="glyphicon glyphicon-magnet 自定义"></i>
<i class="glyphicon glyphicon-chevron-up custom"></i>
<i class="glyphicon glyphicon-chevron-down 自定义"></i>
<i class="glyphicon glyphicon-retweet 自定义"></i>
<i class="glyphicon glyphicon-shopping-cart 自定义"></i>
<i class="glyphicon glyphicon-folder-close 自定义"></i>
<i class="glyphicon glyphicon-folder-open 自定义"></i>
<i class="glyphicon glyphicon-resize-vertical custom"></i>
<i class="glyphicon glyphicon-resize-horizo​​ntal 自定义"></i>
<i class="glyphicon glyphicon-hdd 自定义"></i>
<i class="glyphicon glyphicon-bullhorn 自定义"></i>
<i class="glyphicon glyphicon-bell custom"></i>
<i class="glyphicon glyphicon-证书自定义"></i>
<i class="glyphicon glyphicon-thumbs-up 自定义"></i>
<i class="glyphicon glyphicon-thumbs-down 自定义"></i>
<i class="glyphicon glyphicon-hand-right 自定义"></i>
<i class="glyphicon glyphicon-hand-left custom"></i>
<i class="glyphicon glyphicon-hand-up custom"></i>
<i class="glyphicon glyphicon-hand-down custom"></i>
<i class="glyphicon glyphicon-circle-arrow-right custom"></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 自定义"></i>
<i class="glyphicon glyphicon-扳手自定义"></i>
<i class="glyphicon glyphicon-tasks 自定义"></i>
<i class="glyphicon glyphicon-filter 自定义"></i>
<i class="glyphicon glyphicon-briefcase 自定义"></i>
<i class="glyphicon glyphicon-fullscreen 自定义"></i>
<i class="glyphicon glyphicon-dashboard 自定义"></i>
<i class="glyphicon glyphicon-paperclip 自定义"></i>
<i class="glyphicon glyphicon-heart-empty 自定义"></i>
<i class="glyphicon glyphicon-link 自定义"></i>
<i class="glyphicon glyphicon-phone 自定义"></i>
<i class="glyphicon glyphicon-pushpin 自定义"></i>
<i class="glyphicon glyphicon-usd 自定义"></i>
<i class="glyphicon glyphicon-gbp 自定义"></i>
<i class="glyphicon glyphicon-sort 自定义"></i>
<i class="glyphicon glyphicon-sort-by-alphabet 自定义"></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 自定义"></i>
<i class="glyphicon glyphicon-sort-by-attributes-alt custom"></i>
<i class="glyphicon glyphicon-unchecked 自定义"></i>
<i class="glyphicon glyphicon-expand 自定义"></i>
<i class="glyphicon glyphicon-collapse-down 自定义"></i>
<i class="glyphicon glyphicon-collapse-up custom"></i>
<i class="glyphicon glyphicon-log-in 自定义"></i>
<i class="glyphicon glyphicon-flash 自定义"></i>
<i class="glyphicon glyphicon-log-out 自定义"></i>
<i class="glyphicon glyphicon-new-window 自定义"></i>
<i class="glyphicon glyphicon-record custom"></i>
<i class="glyphicon glyphicon-保存自定义"></i>
<i class="glyphicon glyphicon-open 自定义"></i>
<i class="glyphicon glyphicon-保存自定义"></i>
<i class="glyphicon glyphicon-import 自定义"></i>
<i class="glyphicon glyphicon-export 自定义"></i>
<i class="glyphicon glyphicon-发送自定义"></i>
<i class="glyphicon glyphicon-floppy-disk 自定义"></i>
<i class="glyphicon glyphicon-floppy-saved custom"></i>
<i class="glyphicon glyphicon-floppy-remove 自定义"></i>
<i class="glyphicon glyphicon-floppy-save custom"></i>
<i class="glyphicon glyphicon-floppy-open 自定义"></i>
<i class="glyphicon glyphicon-credit-card custom"></i>
<i class="glyphicon glyphicon-transfer custom"></i>
<i class="glyphicon glyphicon-cutlery 自定义"></i>
<i class="glyphicon glyphicon-header 自定义"></i>
<i class="glyphicon glyphicon-压缩自定义"></i>
<i class="glyphicon glyphicon-earphone custom"></i>
<i class="glyphicon glyphicon-phone 自定义"></i>
<i class="glyphicon glyphicon-tower 自定义"></i>
<i class="glyphicon glyphicon-stats 自定义"></i>
<i class="glyphicon glyphicon-sd-video 自定义"></i>
<i class="glyphicon glyphicon-hd-video 自定义"></i>
<i class="glyphicon glyphicon-subtitles 自定义"></i>
<i class="glyphicon glyphicon-sound-stereo custom"></i>
<i class="glyphicon glyphicon-sound-dolby custom"></i>
<i class="glyphicon glyphicon-sound-5-1 自定义"></i>
<i class="glyphicon glyphicon-sound-6-1 自定义"></i>
<i class="glyphicon glyphicon-sound-7-1 自定义"></i>
<i class="glyphicon glyphicon-copyright-mark custom"></i>
<i class="glyphicon glyphicon-registration-mark 自定义"></i>
<i class="glyphicon glyphicon-cloud-download 自定义"></i>
<i class="glyphicon glyphicon-cloud-upload 自定义"></i>
<i class="glyphicon glyphicon-tree-conifer 自定义"></i>
<i class="glyphicon glyphicon-tree-落叶自定义"></i>