ブートストラップコンポーネント

この章では、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 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>
<i class = "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-large custom"> </ i>
<i class = "glyphicon glyphicon-th custom"> </ i>
<i class = "glyphicon glyphicon-th-list custom"> </ 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 = "glyphicon 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 custom"> </ i>
<i class = "glyphicon glyphicon-tags custom"> </ i>
<i class = "glyphicon glyphicon-book custom"> </ 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-left custom"> </ 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"> </ 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 custom"> </ 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 custom"> </ i>
<i class = "glyphicon glyphicon-remove-circle custom"> </ i>
<i class = "glyphicon glyphicon-ok-circle custom"> </ 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-down custom"> </ 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-open custom"> </ 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"> </ 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 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 custom"> </ i>
<i class = "glyphicon glyphicon-wrench custom"> </ i>
<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-collapse-down custom"> </ i>
<i class = "glyphicon glyphicon-collapse-up custom"> </ i>
<i class = "glyphicon glyphicon-log-in custom"> </ i>
<i class = "glyphicon glyphicon-flash custom"> </ i>
<i class = "glyphicon glyphicon-log-out custom"> </ i>
<i class = "glyphicon glyphicon-new-window custom"> </ i>
<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>
<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 = "glyphicon 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>