Font Awesome 4.7.0

フォント ＞ Font Awesome

選択肢一覧

　状態:- 　閲覧数:1,789 　投稿日:2017-07-11 　更新日:2020-01-25
アイコン表示形式
ライブラリ読込方法
アイコン表示記述場所

アイコン表示形式


2種類
・Icon Font
・SVG画像

ライブラリ読込方法


Font Awesome CDN のアカウントを作成
・re3メール
・フォントフォルダ
<script src="https://use.fontawesome.com/d48c24194a.js"></script>
・「Font Awesome CDN」は、「BootstrapCDN」と何が異なる？

CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
・Font Awesome · BootstrapCDN by MaxCDN

アイコン表示記述場所


2種類
・HTML経由 … iタグ使用
<i class="fa fa-address-book" aria-hidden="true"></i>
・CSS経由 … Unicode使用
f2b9


アイコン表示形式は「Icon Font」「SVG画像」何れが良いの？

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

現在の疑問


アイコン表示2方式
・何れが良いの？
・A.Icon Font 形式
・B.SVG画像形式

検索するも、長所短所が全く分からない
・非同期で動作することぐらい？
・アイコンフォントか？ SVG アイコンか？

現時点の結論


SVG画像形式
・読み込み方式は異なるけれども、記述方式は同じみたいなので、後から変更可能と判断
・新らしい方と思われる「SVG画像形式」を試してみることにした


・Font Awesome Icons
・アイコンをWebフォントで表示！ Font Awesomeの使い方
・アイコンフォントを使おう
・フォントアイコンの使い方 (FontAwesome)
・疑似要素にFont Awesomeのアイコンを使う（リンクタイプ別にアイコンを表示）

アイコンと文字の間にスペースを作る

　閲覧数:461　投稿日:2018-03-04　更新日:2019-06-30

アイコンと文字の間にスペースを作る


文字のすぐ横にコードを貼ると窮屈
・アイコンと文字の間に隙間を作る

・半角スペースで対応
・fa-fwというクラス名を追加
<i class="fa fa-tasks fa-fw" ></i>
FontAwesomeではfa-fwという名前のclassをiタグに追加すると、前後に余白が作られる

fa-fwクラス
・アイコン種類に関わらず、そのアイコンが取る幅を統一させる
・アイコンの大きさに応じて左右にスペースを作ってくれる
・「左右が詰まっているな」と感じたときに使うと、ちょうど良い隙間が出来たる（アイコン種類にもよる）

Font Awesome, the iconic font and CSS toolkit


「Icon Font」を「Font Awesome」で統一



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Font Awesome 4.7.0 78
2 Font Awesome v5.0.8 65
3 Awesome Screenshot 50
4 Adobe Camera Raw 4.0 47
5 FotoSketcher 3.40 46
6 Web Components 44
7 「Icon Font」を「Font Awesome」で統一 43
8 Twitter Bootstrap 1.4 41
9 Twitter Bootstrap 2.0 41
10 FotoSketcher 3.10 40
11 font-size 37
12 Bookmark Sentry 36
13 Material Design 2014 年 35
14 Bootstrap 4 34
15 私がよく利用するFont Awesome 無料アイコン。毎回探すことが面倒なので 34
16 Tor Browser 34
17 Save As MHT 0.1.3 34
18 Crescent Eve 33
19 _notesフォルダ削除 33
20 Bootstrap 2.0 × Google MAP API 33
2024/11/22 19:48 更新
週間人気ページランキング ／ 11-15 → 11-21
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 12
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 10
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 6
3 Design 0 6
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
5 RGB ⇔ Lab | 色変換(色) 4
5 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 4
5 16進数カラーコード ／ 2進数 4
6 カラーコード ／ 色コード | カラーコード(色) 3
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
6 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB 2
7 RGBの種類 ／ ビットカラー | RGB(色) 2
7 8ビットカラー ／ インデックスカラー ／ パレットカラー 2
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
2024/11/22 1:01 更新