Font Awesomeチュートリアル

Font Awesome アイコン

Font Awesome は優れたアイコンフォントライブラリおよび CSS フレームワークのセットです。

Font Awesome フォントは拡張可能なベクトルアイコンを提供しており、サイズ、色、影、および CSS で指定可能なすべてのスタイルをカスタマイズできます。

Font Awesome アイコンを使用するには、HTML ページの<head>部分に以下の行を追加してください：

1、国内推奨 CDN：

<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、海外推奨 CDN

<link　rel="stylesheet"　href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

注意： ダウンロードしてインストールすることはあまり推奨されません。その代わりに、HTML ドキュメントのヘッダーに CDN ファイルを参照してください。
注意： このチュートリアルでは、 4.7.0 版本。

Font Awesome アイコンを配置するには、プレフィックス fa とアイコンの名前を使用して、以下のように HTML ページにアイコンを追加できます。

オンラインサンプル

例

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-car"></i>
<i class="fa fa-car"　style="font-size:48px;"></i>
<i class="fa fa-car"　style="font-size:60px;color:red;"></i>
　
</body>
</html>

テストしてみる ‹/›

Font Awesome はインライン要素と一緒に使用されるように設計されています。<i>および<span>要素はアイコンに広く使用されています。

また、アイコンコンテナのフォントサイズや色を変更すると、アイコンが変更されることに注意してください。

大アイコン

fa-lg (増加33％)、fa-2x、fa-3x、fa-4x、または fa-5x は、コンテナに対してのアイコンの大きさを増やすために使用されます。

例

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
　
</body>
</html>

テストしてみる ‹/›

ヒント：アイコンが上端や下端で切れている場合は、行高を増やしてください。

リストアイコン

fa-ul と fa-li クラスは無序列表のデフォルトのプレフィックスを置き換えるために使用されます。

例

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<ul class="fa-ul">
　　<li><i class="fa-li fa fa-check-square"></i>リストアイコン</li>
　　<li><i class="fa-li fa fa-spinner fa-spin"></i>リストアイコン</li>
　　<li><i class="fa-li fa fa-square"></i>リストアイコン</li>
</ul>
　
</body>
</html>

テストしてみる ‹/›

実行後の効果は以下の通りです：

境界と引っ張られたアイコン

fa-border、fa-pull-right または fa-pull-left クラスは引用や記事アイコンの引っ張りに使用されます。

例

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
基本チュートリアル　--　基礎を学ぶことができたら、もっと遠くへ行ける！！！<br>
基本チュートリアル　--　基礎を学ぶことができたら、もっと遠くへ行ける！！！<br>
基本チュートリアル　--　基礎を学ぶことができたら、もっと遠くへ行ける！！！<br>
基本チュートリアル　--　基礎を学ぶことができたら、もっと遠くへ行ける！！
　
</body>
</html>

テストしてみる ‹/›

実行後の効果は以下の通りです：

動的なアイコン

fa-spin クラスはアイコンを回転させます、fa-pulse クラスはアイコンを 8 周期ごとに回転します。

例

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog　fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
　
</body>
</html>

テストしてみる ‹/›

実行後の効果は以下の通りです：

注意: IE8 および IE9 CSSはサポートしていません。3 アニメーション。

回転や反転されたアイコン

fa-rotate-* および fa-flip-* クラスはアイコンの回転や反転に使用されます。

例

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
　
</body>
</html>

テストしてみる ‹/›

実行後の効果は以下の通りです：

重ねられたアイコン

複数のアイコンを重ねるには、親の fa-stack クラス、fa-stack-1x クラスは通常サイズのアイコンに使用されます。fa-stack-2x クラスは大きなアイコンに使用されます。

fa-inverse クラスはアイコンの色を変更するために使用できます。さらにサイズを制御するために、親に大きなアイコンクラスを追加することもできます。

例

<!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-circle-thin fa-stack-2x"></i>
　　<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-circle fa-stack-2x"></i>
　　<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-camera fa-stack-1x"></i>
　　<i class="fa fa-ban fa-stack-2x text-danger"　style="color:red;"></i>
</span>
fa-ban on fa-camera
　
</body>
</html>

テストしてみる ‹/›

実行後の効果は以下の通りです：

固定幅アイコン

fa-fw クラスは固定幅のアイコンを設定するために使用されます。異なるアイコンの幅が並びが崩れる場合に非常に有用です。特にBootstrapのナビゲーションリストやリストグループに適しています。

例

<!DOCTYPE　html>
<html>
<head>
<meta　name="viewport"　content="width=device-width,　initial-scale=1">
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<p>固定幅あり：</p>
<div　class="list-group">
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-home　fa-fw"></i>　ホーム</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-book　fa-fw"></i>　ライブラリ</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-pencil　fa-fw"></i>　アプリケーション</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-cog　fa-fw"></i>　設定</a>
</div>
<p>固定幅なし：</p>
<div　class="list-group">
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-home"></i>　ホーム</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-book"></i>　ライブラリ</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-pencil"></i>　アプリケーション</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-cog"></i>　設定</a>
</div>
　
</body>
</html>

テストしてみる ‹/›

実行後の効果は以下の通りです：

Font Awesome ブランドアイコン