English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap基本教程

Bootstrapプラグイン

Bootstrap グリフアイコン(Glyphicons)

この章では字体アイコン（Glyphicons）について説明し、いくつかの例を通じてその使用方法を学びます。Bootstrapは以下をバンドルしています 200以上の字体形式の字形があります。まず、字体アイコンとは何かを理解するために始めましょう。

字体アイコンとは何ですか？

字体アイコンはWebプロジェクトで使用されるアイコンフォントです。しかし、Glyphicons Halflings 商用ライセンスが必要ですが、プロジェクトに基づくBootstrapを使用してこれらのアイコンを無料で使用できます。

アイコンの作者に感謝を表すために、使用時にGLYPHICONSウェブサイトのリンクを追加していただければ幸いです。

字体アイコンを取得しました

私たちはすでに 環境のインストール この章ではBootstrapをダウンロードしました 3xバージョンを理解し、そのディレクトリ構造についても学んでください。 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クラスを構成しています。

以下の結果が表示されます：

フォントアイコン付きのナビゲーションバー

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>ナビゲーションのアイコン</title>
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1.0">
　　　　<!--　Bootstrap　--">
　　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<style>
　body　{
	padding-top:　50px;
　　　　padding-left:　50px;
}
</style>
<!--[if　lt　IE　9]>
	<script　src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--">
</head>
<body>
<div　class="navbar　navbar-fixed-top　navbar-inverse"　role="navigation">
	<div　class="container">
		<div　class="navbar-header">
			<button　type="button"　class="navbar-toggle"　data-toggle="collapse"　data-target=".navbar-collapse">
				<span　class="sr-only">Toggle　navigation</span>
				<span　class="icon-bar"></span>
				<span　class="icon-bar"></span>
				<span　class="icon-bar"></span>
			</button>
			<a　class="navbar-brand"　href="#">Project　name</a>
		</div>
		<div　class="collapse　navbar-collapse">
			<ul　class="nav　navbar-nav">
				<li　class="active"><a　href="#"><span　class="glyphicon　glyphicon-ホーム></span>　ホーム</a></li>
				<li><a　href="#shop"><span　class="glyphicon　glyphicon-ショッピング-カート></span>　ショップ</a></li>
				<li><a　href="#support"><span　class="glyphicon　glyphicon-ヘッドフォン></span>　サポート</a></li>
			</ul>
		</div><!--　/.nav-折り畳み　--">
	</div><!--　/.container　--">
</div>
<!--　jQuery　(Bootstrap　プラグインには必要です)　--">
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--　すべてのコンパイルプラグインを含んでいます　--">
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
テストして見てください ‹/›

フォントアイコンのカスタマイズ

フォントアイコンの使用方法について見た後、フォントアイコンのカスタマイズ方法を見てみましょう。

以下の例を基に、フォントサイズ、色、テキストシャドウを変更してアイコンをカスタマイズします。

以下は開始のコードです：

<button　type="button">
　　<span></span>　User
</button>

以下の効果が得られます：


フォントサイズをカスタマイズ

アイコンのフォントサイズを増加または減少することで、アイコンを大きくしたり小さくしたりできます。

<button　type="button"　style="font-サイズ:　60px">
　　<span></span>　User
</button>


フォント色をカスタマイズ

<button　type="button"　style="color:　rgb(212,　106,　64);">
　　<span></span>　User
</button>

テキストシャドウを適用

<button　type="button"　style="text-shadow:　black　5px　3px　3px;">
　　<span></span>　User
</button>

オンラインでフォントアイコンをカスタマイズ

ここをクリックして、フォントアイコンをカスタマイズする »

アイコンリスト

アイコンクラス名例

glyphicon glyphicon-asterisk試してみてください

glyphicon glyphicon-プラス試してみてください

glyphicon glyphicon-マイナス試してみてください

glyphicon glyphicon-euro試してみてください

glyphicon glyphicon-クラウド試してみてください

glyphicon glyphicon-envelope試してみてください

glyphicon glyphicon-pencil試してみてください

glyphicon glyphicon-glass試してみてください

glyphicon glyphicon-music試してみてください

glyphicon glyphicon-search試してみてください

glyphicon glyphicon-ハート試してみてください

glyphicon glyphicon-star試してみてください

glyphicon glyphicon-star-空試してみてください

glyphicon glyphicon-user試してみてください

glyphicon glyphicon-film試してみてください

glyphicon glyphicon-th-large試してみてください

glyphicon glyphicon-th試してみてください

glyphicon glyphicon-th-リスト試してみてください

glyphicon glyphicon-OK試してみてください

glyphicon glyphicon-削除試してみてください

glyphicon glyphicon-zoom-内試してみてください

glyphicon glyphicon-zoom-外試してみてください

glyphicon glyphicon-オフ試してみてください

glyphicon glyphicon-signal試してみてください

glyphicon glyphicon-cog試してみてください

glyphicon glyphicon-trash試してみてください

glyphicon glyphicon-home試してみてください

glyphicon glyphicon-file試してみてください

glyphicon glyphicon-time試してみてください

glyphicon glyphicon-road試してみてください

glyphicon glyphicon-ダウンロード-alt試してみてください

glyphicon glyphicon-ダウンロード試してみてください

glyphicon glyphicon-アップロード試してみてください

glyphicon glyphicon-inbox試してみてください

glyphicon glyphicon-再生-円試してみてください

glyphicon glyphicon-リピート試してみてください

glyphicon glyphicon-リフレッシュ試してみてください

glyphicon glyphicon-リスト-alt試してみてください

glyphicon glyphicon-ロック試してみてください

glyphicon glyphicon-旗試してみてください

glyphicon glyphicon-ヘッドフォン試してみてください

glyphicon glyphicon-ボリューム-オフ試してみてください

glyphicon glyphicon-ボリューム-下試してみてください

glyphicon glyphicon-ボリューム-上試してみてください

glyphicon glyphicon-QRコード試してみてください

glyphicon glyphicon-バーコード試してみてください

glyphicon glyphicon-タグ試してみてください

glyphicon glyphicon-タグ試してみてください

glyphicon glyphicon-本試してみてください

glyphicon glyphicon-ブックマーク試してみてください

glyphicon glyphicon-印刷試してみてください

glyphicon glyphicon-カメラ試してみてください

glyphicon glyphicon-フォント試してみてください

glyphicon glyphicon-ボールド試してみてください

glyphicon glyphicon-イタリック試してみてください

glyphicon glyphicon-テキスト-高さ試してみてください

glyphicon glyphicon-テキスト-幅試してみてください

glyphicon glyphicon-アライメント-左試してみてください

glyphicon glyphicon-アライメント-中央試してみてください

glyphicon glyphicon-アライメント-右試してみてください

glyphicon glyphicon-アライメント-ジャスト試してみてください

glyphicon glyphicon-リスト試してみてください

glyphicon glyphicon-インデント-左試してみてください

glyphicon glyphicon-インデント-右試してみてください

glyphicon glyphicon-フェイスタイム-ビデオ試してみてください

glyphicon glyphicon-写真試してみてください

glyphicon glyphicon-地図-マーカー試してみてください

glyphicon glyphicon-調整試してみてください

glyphicon glyphicon-トーン試してみてください

glyphicon glyphicon-編集試してみてください

glyphicon glyphicon-共有試してみてください

glyphicon glyphicon-チェック試してみてください

glyphicon glyphicon-移動試してみてください

glyphicon glyphicon-ステップ-戻る試してみてください

glyphicon glyphicon-速報-戻る試してみてください

glyphicon glyphicon-戻る試してみてください

glyphicon glyphicon-再生試してみてください

glyphicon glyphicon-一時停止試してみてください

glyphicon glyphicon-ストップ試してみてください

glyphicon glyphicon-フォワード試してみてください

glyphicon glyphicon-速報-フォワード試してみてください

glyphicon glyphicon-ステップ-フォワード試してみてください

glyphicon glyphicon-エジェクト試してみてください

glyphicon glyphicon-矢印-左試してみてください

glyphicon glyphicon-矢印-右試してみてください

glyphicon glyphicon-プラス-サイン試してみてください

glyphicon glyphicon-マイナス-サイン試してみてください

glyphicon glyphicon-削除-サイン試してみてください

glyphicon glyphicon-OK-サイン試してみてください

glyphicon glyphicon-質問-サイン試してみてください

glyphicon glyphicon-情報-サイン試してみてください

glyphicon glyphicon-スクリーンショット試してみてください

glyphicon glyphicon-削除-円試してみてください

glyphicon glyphicon-OK-円試してみてください

glyphicon glyphicon-禁止-円試してみてください

glyphicon glyphicon-矢印-左試してみてください

glyphicon glyphicon-矢印-右試してみてください

glyphicon glyphicon-矢印-上試してみてください

glyphicon glyphicon-矢印-下試してみてください

glyphicon glyphicon-共有-alt試してみてください

glyphicon glyphicon-リサイズ-フル試してみてください

glyphicon glyphicon-リサイズ-小さい試してみてください

glyphicon glyphicon-感叹-サイン試してみてください

glyphicon glyphicon-プレゼント試してみてください

glyphicon glyphicon-葉試してみてください

glyphicon glyphicon-火試してみてください

glyphicon glyphicon-目-開く試してみてください

glyphicon glyphicon-目-閉じる試してみてください

glyphicon glyphicon-警告-サイン試してみてください

glyphicon glyphicon-飛行機試してみてください

glyphicon glyphicon-カレンダー試してみてください

glyphicon glyphicon-ランダム試してみてください

glyphicon glyphicon-コメント試してみてください

glyphicon glyphicon-磁石試してみてください

glyphicon glyphicon-矢印-上試してみてください

glyphicon glyphicon-矢印-下試してみてください

glyphicon glyphicon-リツイート試してみてください

glyphicon glyphicon-ショッピング-カート試してみてください

glyphicon glyphicon-フォルダ-閉じる試してみてください

glyphicon glyphicon-フォルダ-開く試してみてください

glyphicon glyphicon-リサイズ-垂直試してみてください

glyphicon glyphicon-リサイズ-水平試してみてください

glyphicon glyphicon-HDD試してみてください

glyphicon glyphicon-ハッカ試してみてください

glyphicon glyphicon-ベル試してみてください

glyphicon glyphicon-証明書試してみてください

glyphicon glyphicon-親指-上試してみてください

glyphicon glyphicon-親指-下試してみてください

glyphicon glyphicon-手-右試してみてください

glyphicon glyphicon-手-左試してみてください

glyphicon glyphicon-手-上試してみてください

glyphicon glyphicon-手-下試してみてください

glyphicon glyphicon-円-矢印-右試してみてください

glyphicon glyphicon-円-矢印-左試してみてください

glyphicon glyphicon-円-矢印-上試してみてください

glyphicon glyphicon-円-矢印-下試してみてください

glyphicon glyphicon-地球試してみてください

glyphicon glyphicon-ワrench試してみてください

glyphicon glyphicon-タスク試してみてください

glyphicon glyphicon-フィルタ試してみてください

glyphicon glyphicon-ハンディバッグ試してみてください

glyphicon glyphicon-フルスクリーン試してみてください

glyphicon glyphicon-ダッシュボード試してみてください

glyphicon glyphicon-ハサミ試してみてください

glyphicon glyphicon-ハート-空試してみてください

glyphicon glyphicon-リンク試してみてください

glyphicon glyphicon-電話試してみてください

glyphicon glyphicon-ピン試してみてください

glyphicon glyphicon-USD試してみてください

glyphicon glyphicon-GBP試してみてください

glyphicon glyphicon-並べ替え試してみてください

glyphicon glyphicon-並べ替え-による-アルファベット試してみてください

glyphicon glyphicon-並べ替え-による-アルファベット-alt試してみてください

glyphicon glyphicon-並べ替え-による-順序試してみてください

glyphicon glyphicon-並べ替え-による-順序-alt試してみてください

glyphicon glyphicon-並べ替え-による-属性試してみてください

glyphicon glyphicon-並べ替え-による-属性-alt試してみてください

glyphicon glyphicon-未選択試してみてください

glyphicon glyphicon-展開試してみてください

glyphicon glyphicon-折り畳み-下試してみてください

glyphicon glyphicon-折り畳み-上試してみてください

glyphicon glyphicon-ログ-内試してみてください

glyphicon glyphicon-フラッシュ試してみてください

glyphicon glyphicon-ログ-外試してみてください

glyphicon glyphicon-新しい-ウィンドウ試してみてください

glyphicon glyphicon-記録試してみてください

glyphicon glyphicon-保存試してみてください

glyphicon glyphicon-開く試してみてください

glyphicon glyphicon-保存済み試してみてください

glyphicon glyphicon-インポート試してみてください

glyphicon glyphicon-エクスポート試してみてください

glyphicon glyphicon-送信試してみてください

glyphicon glyphicon-フロッピー-ディスク試してみてください

glyphicon glyphicon-フロッピー-保存済み試してみてください

glyphicon glyphicon-フロッピー-削除試してみてください

glyphicon glyphicon-フロッピー-保存試してみてください

glyphicon glyphicon-フロッピー-開く試してみてください

glyphicon glyphicon-クレジット-カード試してみてください

glyphicon glyphicon-転送試してみてください

glyphicon glyphicon-フォーク試してみてください

glyphicon glyphicon-ヘッダー試してみてください

glyphicon glyphicon-圧縮試してみてください

glyphicon glyphicon-ヘッドフォン試してみてください

glyphicon glyphicon-電話-alt試してみてください

glyphicon glyphicon-タワー試してみてください

glyphicon glyphicon-統計試してみてください

glyphicon glyphicon-SD-ビデオ試してみてください

glyphicon glyphicon-HD-ビデオ試してみてください

glyphicon glyphicon-字幕試してみてください

glyphicon glyphicon-サウンド-ステレオ試してみてください

glyphicon glyphicon-サウンド-ドルビー試してみてください

glyphicon glyphicon-サウンド-5-1試してみてください

glyphicon glyphicon-サウンド-6-1試してみてください

glyphicon glyphicon-サウンド-7-1試してみてください

glyphicon glyphicon-著作権-マーク試してみてください

glyphicon glyphicon-登録-マーク試してみてください

glyphicon glyphicon-クラウド-ダウンロード試してみてください

glyphicon glyphicon-クラウド-アップロード試してみてください

glyphicon glyphicon-木-針葉試してみてください

glyphicon glyphicon-木-落葉試してみてください
Bootstrap ドロップダウンメニューBootstrap レスポンシブユーティリティ