概要
状態:-
閲覧数:1,584
投稿日:2018-03-04
更新日:2020-01-25
手順
1. fontawesome-all.jsを読込
・fontawesome-all.jsは、すべての基本機能と、フォントAwesomeを使用するときに必要なすべてのビジュアルスタイルを読み込む
・必要なものがすべて含まれている下記コードを、フォントAwesomeを使用する各テンプレートまたはページの<head>内に配置する
・Font Awesome Free CDNを使用した例
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
2. UIのマークアップにアイコンを配置する
・配置が完了したら、HTMLの<body>にアイコンを配置することができる
・<i>のような一貫したHTML要素を使用することをお勧めする
・要素には、使用するスタイル（スタイルプレフィックス）と特定のアイコン（アイコン名）を呼び出す2つのクラスを追加する
作成例
▼index.html
<head>
<!--load everything-->
<script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>
<body>
<!--user icon in two different styles-->
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<!--brand icon-->
<i class="fab fa-github-square"></i>
</body>
<!--load everything-->
<script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>
<body>
<!--user icon in two different styles-->
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<!--brand icon-->
<i class="fab fa-github-square"></i>
</body>
・Get Started
「JavaScriptを使用したSVG」を推奨
JavaScriptを使用したSVG
SVGに直接置き換える
・フレームワークSVGは、あなたのFont Awesomeアイコン要素（例：<i class = "fas fa-camera-retro"> </ i>）をSVGに直接置き換える
・SVGアイコンは自動的にCSSのサイズと色を継承する
・つまり、通常のSVGの手間をかけずに、フォントの使い方が簡単になる
あなたのHTML
<i class="fas fa-camera-retro"></i>
「Font Awesome's SVG with JS」適用後
<svg class="svg-inline--fa fa-camera-retro fa-w-16" aria-hidden="true" data-fa-i2svg="" data-prefix="fas" data-icon="camera-retro" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"></path>
</svg>
<path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"></path>
</svg>
非同期
アイコンはページ内で非同期に読み込まれる
・これにはいくつかの利点といくつかの欠点がある
・この方法でロードすることの主な利点は、ロードするアイコンの待機中にページがレンダリングされるのをブロックしないことである
・しかし、一旦アイコンがロードされると、レイアウトがシフトする可能性があるため、これは否定的なものと見なすこともできる
基本的な使用
Font Awesomeは、インライン要素で使用するように設計されている
・簡潔さのために<i>タグが好まれるが、<span>を使用する方が意味的に正しい
・<i>タグにアイコンを置くことによるSEO評価
<i class="fas fa-camera-retro"></i>
・アイコンは自動的にCSSのサイズと色を継承する<div style="font-size:3em; color:Tomato">
<i class="fas fa-camera-retro"></i>
</div>
<i class="fas fa-camera-retro"></i>
</div>
fa接頭辞はバージョン5では廃止された
新しい「Style Prefix」
・Style「Solid」を意味する「fas」
・Style「Brands」を意味する「fab」
固定幅のアイコン
・fa-fwを使用してアイコンを同じ固定幅に設定する
※アイコンの幅を変更すると、縦の位置合わせが狂ってしまう
・navリストやリストグループのようなもので特に便利である
・この例では、アイコンの背景色を追加して固定幅を確認している
<div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
<div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
<div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
<div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
<div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>
<div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
<div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
<div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
<div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>
How to Use