Font Awesome アイコン

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

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 クラスは、コンテナに対するアイコンサイズを拡大するために使用されます。

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

リストアイコン

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 のナビゲーションリストやリストグループに適しています。