Font Awesome v5.0.8

フォント ＞ Font Awesome

概要

　状態:- 　閲覧数:1,443 　投稿日: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」を推奨

　閲覧数:356　投稿日: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フォント



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Font Awesome v5.0.8 79
2 Font Awesome 4.7.0 65
3 Awesome Screenshot 49
4 Web Components 42
5 「Icon Font」を「Font Awesome」で統一 42
6 Adobe Camera Raw 4.0 41
7 Twitter Bootstrap 2.0 40
8 FotoSketcher 3.10 39
9 FotoSketcher 3.40 39
10 Save As MHT 0.1.3 39
11 Crescent Eve 39
12 font-size 36
13 FireFov6.0 指定サイトでrssURLの確認 36
14 Bookmark Sentry 35
15 Responsive Glid 35
16 Firefox5.0 ／ ブラウザ関連メモ 35
17 Twitter Bootstrap 1.4 35
18 Bootstrap v2.3.1 34
19 私がよく利用するFont Awesome 無料アイコン。毎回探すことが面倒なので 34
20 「Aptana Studio 3.0.8」を使ってみた感想 33
2024/4/25 16:33 更新
週間人気ページランキング ／ 4-18 → 4-24
順位 ページタイトル抜粋 アクセス数
1 16進数カラーコード ／ 2進数 25
2 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
2 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 13
3 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 11
4 RGB ⇔ Lab | 色変換(色) 10
5 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 9
6 Design 0 8
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 7
8 「bgcolor」「background-color」「background」の違い | CSS 4
8 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 4
8 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 4
9 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 3
9 「群青色」「瑠璃色」「ウルトラマリンブルー」の違い 3
10 iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト | HTML5(HTML) 2
10 ユーザー個別の設定情報が格納されているレジストリキーを削除 2
10 カラーコード ／ 色コード | カラーコード(色) 2
10 CSSで出来ないこと | CSS 2
10 RGBの種類 ／ ビットカラー | RGB(色) 2
2024/4/25 1:01 更新