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

フォント ＞ Font Awesome

一行で結論

　状態:- 　閲覧数:2,323 　投稿日:2018-03-03 　更新日:2020-01-25

「Font Awesome」で統一


既存サイトも含め、全ての「Icon Font」を「Font Awesome」で統一することにした

経緯


Bootstrapを止めることにした
・これを機に、複数利用していた「Icon Font」をどこかに統一したい

「Icon Font」を複数利用していると、
・色々混乱してくる
・頭をその都度切り替えるのが面倒なので…

2018/3/3「Icon Font」調査

　閲覧数:599　投稿日:2017-11-30　更新日:2018-03-04

Font Awesome


最強
・サイトリニューアルされていた
・現在もアイコンは増加し続けているみたい

Material icons - Material Design


Google社が公開しているマテリアルデザインのガイドラインに基づいて作成された公式のアイコンセット
・900以上ものアイコンが提供されている

感想
・期待して見てみたが、自分にはピンと来なかった
・「あのGoogleが提供している」という利点以外の長所を見出せなかった

Ligature Symbols


日本人が作成しているため、日本向けアイコンが用意されている
・Bootstrap2系の途中より利用してきた

最終更新「 Jan 31, 2013」
・この5年間、一度も更新されていない
・特に不満はないが、今後も更新されないであろうことを考えると、ここら辺り(Bootstrapを止めることにした今)が潮時なのかもしれない
・2013-3-10 → 2018-3-4

IcoMoo


「Icon Font」を自作する際に便利みたい
・「Font Awesome」に満足出来なくなった場合に、導入を検討するかも
・IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法
・「IcoMoon」を使用して自作アイコンをWebフォントにしてみよう！
・Webアイコンフォントの作り方 - ②アイコンをWebアイコンフォントに変換する
・Webアイコンフォントの作り方 - ③SASS/CSS、HTMLを設定する
・IcoMoonを使ってSVGからアイコンフォントを作る方法 

・SVGアイコン | アイコン素材ダウンロードサイト「icooon-mono」


Font Awesome 4.7.0

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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 「Icon Font」を「Font Awesome」で統一 62
2 Awesome Screenshot 43
3 Font Awesome 4.7.0 43
4 Font Awesome v5.0.8 42
5 「SRWare Iron」を検討 36
6 アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード 33
7 Web Components 33
8 私がよく利用するFont Awesome 無料アイコン。毎回探すことが面倒なので 32
9 「Chrome 拡張機能」一覧 32
10 「秀丸」 VS 「Crescent Eve」 31
11 「Illustrator CS3」で出力範囲指定 30
12 「Invalid property value.」遭遇事例一覧 30
13 Fireworks で背景画像透明化 30
14 Bookmarks clean up 30
15 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 29
16 ページで使用されている「id名」「class名」をChromeで取得したい 　 29
17 Crescent Eve 29
18 「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法 29
19 「Twitter Bootstrap」✕「フォーム」 29
20 「Fireworks CS3」は「SVG」 出力不可 29
2026/4/20 23:46 更新
週間人気ページランキング ／ 4-13 → 4-19
順位 ページタイトル抜粋 アクセス数
1 Design 0 20
2 「Default User」を削除したら、既存ブックマークが削除されてしまった！ 18
3 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 17
4 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 15
5 Material Design 2014 年 | Material Design(色) 14
6 「.aiファイル」を下位バージョンで保存するための操作手順 ／ OS 上で「.aiファイル」から「作成したIllustratorバージョン」を確認する方法 ／ 下位バージョンのIllustratorで開く方法 12
7 Chromeシークレットモードで、ウインドウ幅をリサイズしようとすると、下限制限を受ける | Google Chrome(ブラウザ) 11
8 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 | Chrome 拡張機能 8
9 鉄道会社毎のカラーコード | カラーコード(色) 6
10 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
10 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
10 Adobe Camera Raw 4.0 | Photoshop 5
10 RGBの種類 ／ ビットカラー | RGB(色) 5
10 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 5
11 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 4
11 アイコン | 3系(Bootstrap) 4
12 Photoshop無料アクションファイル(atn)導入見送り | Photoshop 3
12 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
12 RGB ⇔ Lab | 色変換(色) 3
12 「bgcolor」「background-color」「background」の違い | CSS 3
2026/4/20 5:05 更新