Font Awesome 4.7.0

フォント ＞ Font Awesome

選択肢一覧

　状態:- 　閲覧数:1,862 　投稿日: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画像」何れが良いの？

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

現在の疑問


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

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

現時点の結論


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


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

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

　閲覧数:486　投稿日: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
2025/2/05 17:56 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード ／ 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game ／ オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー ／ NIGAOE MAKER 4
7 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games ／ オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 ／ ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 ／ 表色系 ／ 顕色系 ／ 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新