Font Awesome v5.0.8

フォントFont Awesome

概要

 状態:-  閲覧数:663  投稿日: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>

Get Started

「JavaScriptを使用したSVG」を推奨

 閲覧数:138 投稿日:2018-03-04 更新日:2018-03-04 

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>

非同期


アイコンはページ内で非同期に読み込まれる
・これにはいくつかの利点といくつかの欠点がある
・この方法でロードすることの主な利点は、ロードするアイコンの待機中にページがレンダリングされるのをブロックしないことである
・しかし、一旦アイコンがロードされると、レイアウトがシフトする可能性があるため、これは否定的なものと見なすこともできる

基本的な使用


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>

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>


How to Use


「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード)

Font Awesome 表示方法は2種類ある。A.JavaScript + SVG。B.CSS + Webフォント



週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新