アイコン Glyphicons

画像を使ったアイコンが200種類用意されている。

使い方

span要素のclass属性にglyphiconと使いたいアイコンのクラス名を指定する。

<span class="glyphicon 使いたいアイコンのクラス名" aria-hidden="true"></span>

例えば、星であれば、

<span class="glyphicon glyphicon-star" aria-hidden="true"></span>

のようにする。

ボタンで使う方法1

表示サンプル

ソースコード

<button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>Download</button>

ボタンで使う方法2

表示サンプル

ソースコード

<div class="btn-toolbar" role="toolbar">
	<div class="btn-group">
		<button class="btn btn-default" aria-label="Left Align" type="button">
			<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
		</button>
		<button class="btn btn-default" aria-label="Center Align" type="button">
			<span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
		</button>
		<button class="btn btn-default" aria-label="Right Align" type="button">
			<span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
		</button>
		<button class="btn btn-default" aria-label="Justify" type="button">
			<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
		</button>
	</div>
</div>

アラートで使う方法

表示サンプル

ソースコード

<div class="alert alert-danger" role="alert">
	<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
	アラート
</div>

サイズ

アイコンのサイズは、フォントサイズに依存しているようだ。

フォントサイズが「32px」であれば、32px

フォントサイズが「16px」であれば、16px