Font Awesome アイコン

Font Awesome は、Web デザインと開発に使用される人気のアイコンフォントライブラリです。

Font Awesome には一連のベクターアイコンが含まれており、CSS で簡単に呼び出して使用できます。サイズ、色、影などをカスタマイズできます。

Font Awesome はもともと Dave Gandy によって作成されたオープンソースプロジェクトで、従来の画像アイコンに代わる、柔軟で使いやすく拡張性のあるアイコンセットを提供することを目的としています。

Font Awesome は多くのバージョンに更新されており、現在主流なのはFont Awesome 6 、Font Awesome 5およびFont Awesome 4です。すべてのバージョンは次のものを参照できます：https://fontawesome.com/versions。

当サイトのテストでは、次を使用していますFont Awesome 4。アイコンリスト：https://fontawesome.com/v4/icons/。

Font Awesome アイコンを使用するには、HTML ページの<head>セクションに次の行を追加してください：

1. 中国国内推奨CDN：

2. 海外推奨CDN

3. ローカルに直接ダウンロード

Download

注意：ダウンロードしてインストールするのはあまりおすすめしません。HTML 文書のヘッダーで CDN ファイルを直接参照するだけでよいです。

注意：本チュートリアルでは 4.7.0 バージョンを使用しています。

プレフィックスを使用でき、faアイコン名を使用して Font Awesome アイコンを配置できます。

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

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

大きいアイコン

fa-lg（33% 増加）、fa-2x、fa-3x、fa-4x、または fa-5x クラスは、コンテナに対するアイコンのサイズを拡大するために使用します。

ヒント：アイコンの上下が切り取られる場合は、行の高さ（line-height）を増やしてください。

リストアイコン

fa-ul クラスと fa-li クラスは、順序なしリストのデフォルトの先頭記号を置き換えるために使用します。

枠線と引き出しアイコン

fa-border、fa-pull-right または fa-pull-left クラスは、プル引用や記事内アイコンに使用します。

アニメーションアイコン

fa-spin クラスはアイコンを回転させ、fa-pulse クラスはアイコンを 8 ステップ周期で回転させます。

注意：IE8 と IE9 は CSS3 アニメーションをサポートしていません。

回転および反転アイコン

fa-rotate-* クラスと fa-flip-* クラスは、アイコンの回転と反転に使用します。

スタックされたアイコン

複数のアイコンを積み重ねるには、親要素で fa-stack クラスを使用します。fa-stack-1x クラスは通常サイズのアイコン、fa-stack-2x クラスは大きめのアイコンに使用します。

fa-inverse クラスはアイコンの色を反転させるために使用できます。親要素にさらに大きなアイコンのクラスを追加して、サイズを細かく調整することもできます。

固定幅アイコン

fa-fw クラスは、アイコンの固定幅を設定するために使用します。異なるアイコンの幅が揃っていない場合に便利です。特に Bootstrap のナビゲーションリストやリストグループに適しています。