Font Awesome は多くのアイコンフォントを提供している非常にありがたい存在ですが、その数はフリーだけで1,600個を超える膨大な数であるため、かえって目的のフォントを探し出すのが大変だったりします。
普通であれば検索をかければ解決できるような問題なのですが、Font Awesomeは英語のサイトなので、言葉選びで困ります。
そんな悩みを解消するために、フリーのアイコンフォントのうち、個人的に使いそうだと思った186個のみをピックアップしてみました。
特徴１
「Ctrl＋F」や「command＋F」で、日本語検索ができます。
（ものによっては翻訳が微妙かもしれませんが…）
特徴２
フォントアイコンとHTML記述用コードを並列してリスト化していますので、この中にあるものであれば、いちいちページを跨がなくてもコピーすることが可能です。
特徴３
はてなブログに対応したコード表記になっています。
また、
Font Awesomesの使い方を知りたい。
Font Awesomesを使ったCSSデザインのサンプルが見たい。
そのような方はこちらの記事をご覧になってください。
アイコンサンプルと対応コードのリスト
チェックボックス枠
<i class="far fa-check-square"> </i>
チェックボックス塗
<i class="fas fa-check-square"> </i>
チェック（レ点）
<i class="fas fa-check"> </i>
チェックサークル枠
<i class="far fa-check-circle"> </i>
チェックサークル塗
<i class="fas fa-check-circle"> </i>
角度-ダブル下
<i class="fas fa-angle-double-down"> </i>
角度-ダブル右
<i class="fas fa-angle-double-right"> </i>
角度-ダブル左
<i class="fas fa-angle-double-left"> </i>
矢印-円形塗上
<i class="fas fa-arrow-alt-circle-up"> </i>
矢印-円形塗左
<i class="fas fa-arrow-alt-circle-left"> </i>
矢印-円形塗右
<i class="fas fa-arrow-alt-circle-right"> </i>
矢印-円形塗下
<i class="fas fa-arrow-alt-circle-down"> </i>
シェブロンサークル上
<i class="fas fa-chevron-circle-up"> </i>
シェブロンサークル左
<i class="fas fa-chevron-circle-left"> </i>
シェブロンサークル右
<i class="fas fa-chevron-circle-right"> </i>
シェブロンサークル下
<i class="fas fa-chevron-circle-down"> </i>
キャレット上
<i class="fas fa-caret-up"> </i>
キャレット左
<i class="fas fa-caret-left"> </i>
キャレット右
<i class="fas fa-caret-right"> </i>
キャレット下
<i class="fas fa-caret-down"> </i>
鐘
<i class="fas fa-bell"> </i>
ブロガー
<i class="fab fa-blogger"> </i>
本
<i class="fas fa-book"> </i>
ブックマーク
<i class="far fa-bookmark"> </i>
建物
<i class="far fa-building"> </i>
ランドマーク
<i class="fas fa-landmark"> </i>
飛行機
<i class="fas fa-plane"> </i>
車
<i class="fas fa-car"> </i>
トラック
<i class="fas fa-truck"> </i>
列車
<i class="fas fa-train"> </i>
地下鉄
<i class="fas fa-subway"> </i>
スーツケース
<i class="fas fa-suitcase-rolling"> </i>
スピーカー（音）
<i class="fas fa-bullhorn"> </i>
カレンダー
<i class="far fa-calendar-alt"> </i>
分布図
<i class="fas fa-chart-area"> </i>
棒グラフ
<i class="far fa-chart-bar"> </i>
折れ線グラフ
<i class="fas fa-chart-line"> </i>
円グラフ
<i class="fas fa-chart-pie"> </i>
クリップボード塗
<i class="fas fa-clipboard"> </i>
クリップボード枠
<i class="far fa-clipboard"> </i>
クリップボードチェック
<i class="fas fa-clipboard-check"> </i>
クリップボードリスト
<i class="fas fa-clipboard-list"> </i>
時計塗
<i class="fas fa-clock"> </i>
時計枠
<i class="far fa-clock"> </i>
コピー塗
<i class="fas fa-copy"> </i>
コピー枠
<i class="far fa-copy"> </i>
ペースト
<i class="fas fa-paste"> </i>
クラウド・ダウンロード
<i class="fas fa-cloud-download-alt"> </i>
クラウド・アップロード
<i class="fas fa-cloud-upload-alt"> </i>
コメント塗
<i class="fas fa-comment"> </i>
コメント枠
<i class="far fa-comment"> </i>
コメント四角塗
<i class="fas fa-comment-alt"> </i>
コメント四角枠
<i class="far fa-comment-alt"> </i>
コメント点々塗
<i class="fas fa-comment-dots"> </i>
コメント点々枠
<i class="far fa-comment-dots"> </i>
コード（html・css）
<i class="fas fa-code"> </i>
コーヒー（休憩）
<i class="fas fa-coffee"> </i>
ソファー（休憩）
<i class="fas fa-couch"> </i>
歯車（設定）
<i class="fas fa-cog"> </i>
レンチ（工具・ツール）
<i class="fas fa-wrench"> </i>
ツール（工具）
<i class="fas fa-tools"> </i>
冠（ランキング）
<i class="fas fa-crown"> </i>
はさみ（カット）
<i class="fas fa-cut"> </i>
データベース
<i class="fas fa-database"> </i>
モバイル（スマホ）
<i class="fas fa-mobile-alt"> </i>
デスクトップ（PC）
<i class="fas fa-desktop"> </i>
ラップトップ（PC）
<i class="fas fa-laptop"> </i>
テレビ
<i class="fas fa-tv"> </i>
ドットサークル塗
<i class="fas fa-dot-circle"> </i>
ドットサークル枠
<i class="far fa-dot-circle"> </i>
アップロード
<i class="fas fa-upload"> </i>
ダウンロード
<i class="fas fa-download"> </i>
編集塗
<i class="fas fa-edit"> </i>
編集枠
<i class="far fa-edit"> </i>
省略の記号
<i class="fas fa-ellipsis-v"> </i>
メール枠
<i class="far fa-envelope"> </i>
メール塗
<i class="fas fa-envelope"> </i>
メール開封
<i class="fas fa-envelope-open-text"> </i>
エクスクラメーションマーク（！）円形
<i class="fas fa-exclamation-circle"> </i>
エクスクラメーションマーク（！）三角形
<i class="fas fa-exclamation-triangle"> </i>
外部リンクマーク
<i class="fas fa-external-link-alt"> </i>
外部リンクボックス
<i class="fas fa-external-link-square-alt"> </i>
リンク（鎖）
<i class="fas fa-link"> </i>
ファイル塗
<i class="fas fa-file"> </i>
ファイル枠
<i class="far fa-file"> </i>
ファイル塗三本線
<i class="fas fa-file-alt"> </i>
ファイル塗コード
<i class="fas fa-file-code"> </i>
ファイル枠コード
<i class="far fa-file-code"> </i>
ファイルインポート
<i class="fas fa-file-import"> </i>
ファイルエクスポート
<i class="fas fa-file-export"> </i>
ファイルアップロード
<i class="fas fa-file-upload"> </i>
画像ファイル塗
<i class="fas fa-file-image"> </i>
画像ファイル枠
<i class="far fa-file-image"> </i>
フォルダ塗
<i class="fas fa-folder"> </i>
フォルダ枠
<i class="far fa-folder"> </i>
フォルダ塗-開く
<i class="fas fa-folder-open"> </i>
フォルダ枠-開く
<i class="far fa-folder-open"> </i>
フォント
<i class="fas fa-font"> </i>
ゲーム
<i class="fas fa-gamepad"> </i>
プレゼント
<i class="fas fa-gift"> </i>
ハンド（手）-塗-下
<i class="fas fa-hand-point-down"> </i>
ハンド（手）-枠-下
<i class="far fa-hand-point-down"> </i>
ハンド（手）-塗-右
<i class="fas fa-hand-point-right"> </i>
ハンド（手）-枠-右
<i class="far fa-hand-point-right"> </i>
手伝い
<i class="fas fa-hands-helping"> </i>
見出しタグ（H）
<i class="fas fa-heading"> </i>
ヘッドホン（音楽）
<i class="fas fa-headphones"> </i>
マイク（音声）
<i class="fas fa-microphone-alt"> </i>
ハート塗
<i class="fas fa-heart"> </i>
ハート枠
<i class="far fa-heart"> </i>
歴史・過去（時間）
<i class="fas fa-history"> </i>
ホーム（家）
<i class="fas fa-home"> </i>
画像（ドキュメント）塗
<i class="fas fa-image"> </i>
画像（ドキュメント）枠
<i class="far fa-image"> </i>
画像（ドキュメント）塗-複数
<i class="fas fa-images"> </i>
画像（ドキュメント）枠-複数
<i class="far fa-images"> </i>
インフォメーション
<i class="fas fa-info"> </i>
インフォメーションサークル
<i class="fas fa-info-circle"> </i>
レイヤー
<i class="fas fa-layer-group"> </i>
電球（アイデア）塗
<i class="fas fa-lightbulb"> </i>
電球（アイデア）枠
<i class="far fa-lightbulb"> </i>
タスク
<i class="fas fa-tasks"> </i>
リスト塗
<i class="fas fa-list-alt"> </i>
リスト枠
<i class="far fa-list-alt"> </i>
場所を示す矢印
<i class="fas fa-location-arrow"> </i>
マップマーク
<i class="fas fa-map-marked-alt"> </i>
立て看板
<i class="fas fa-map-signs"> </i>
ルート（道のり）
<i class="fas fa-route"> </i>
案内標識
<i class="fas fa-directions"> </i>
ペン
<i class="fas fa-pen"> </i>
ファンシーなペン
<i class="fas fa-pen-fancy"> </i>
ペン先
<i class="fas fa-pen-nib"> </i>
マーカー
<i class="fas fa-marker"> </i>
筆
<i class="fas fa-paint-brush"> </i>
鉛筆
<i class="fas fa-pencil-alt"> </i>
パレット
<i class="fas fa-palette"> </i>
マイナスサークル
<i class="fas fa-minus-circle"> </i>
マイナスボックス塗
<i class="fas fa-minus-square"> </i>
マイナスボックス枠
<i class="far fa-minus-square"> </i>
プラスサークル
<i class="fas fa-plus-circle"> </i>
プラスボックス塗
<i class="fas fa-plus-square"> </i>
プラスボックス枠
<i class="far fa-plus-square"> </i>
マウス
<i class="fas fa-mouse"> </i>
マウスポインター（カーソル）
<i class="fas fa-mouse-pointer"> </i>
音楽（音符・楽しい）
<i class="fas fa-music"> </i>
紙飛行機
<i class="fas fa-paper-plane"> </i>
クリップ
<i class="fas fa-paperclip"> </i>
パーセント（％）
<i class="fas fa-percent"> </i>
電話
<i class="fas fa-phone-alt"> </i>
電話スクエア
<i class="fas fa-phone-square-alt"> </i>
貯金箱（お金）
<i class="fas fa-piggy-bank"> </i>
再生サークル塗（動画）
<i class="fas fa-play-circle"> </i>
再生サークル枠（動画）
<i class="far fa-play-circle"> </i>
投票・アンケート
<i class="fas fa-poll"> </i>
電源
<i class="fas fa-power-off"> </i>
プロジェクト図
<i class="fas fa-project-diagram"> </i>
QRコード
<i class="fas fa-qrcode"> </i>
クエスチョン（？）
<i class="fas fa-question"> </i>
クエスチョン（？）サークル塗
<i class="fas fa-question-circle"> </i>
クエスチョン（？）サークル枠
<i class="far fa-question-circle"> </i>
ランダム
<i class="fas fa-random"> </i>
Reed me（読んで）
<i class="fab fa-readme"> </i>
やり直し
<i class="fas fa-redo-alt"> </i>
元に戻す
<i class="fas fa-undo-alt"> </i>
検索（虫メガネ）
<i class="fas fa-search"> </i>
シェア
<i class="fas fa-share-alt"> </i>
シェアボックス塗
<i class="fas fa-share-square"> </i>
シェアボックス枠
<i class="far fa-share-square"> </i>
サイトマップ
<i class="fas fa-sitemap"> </i>
四角（スクエア）塗
<i class="fas fa-square"> </i>
四角（スクエア）枠
<i class="far fa-square"> </i>
星（スター）塗
<i class="fas fa-star"> </i>
星（スター）枠
<i class="far fa-star"> </i>
同期
<i class="fas fa-sync-alt"> </i>
テーブル
<i class="fas fa-table"> </i>
タグ
<i class="fas fa-tags"> </i>
いいね（手）塗
<i class="fas fa-thumbs-up"> </i>
いいね（手）枠
<i class="far fa-thumbs-up"> </i>
ゴミ箱塗
<i class="fas fa-trash-alt"> </i>
ゴミ箱枠
<i class="far fa-trash-alt"> </i>
USB
<i class="fab fa-usb"> </i>
ユーザー（人）塗
<i class="fas fa-user"> </i>
ユーザー（人）枠
<i class="far fa-user"> </i>
ユーザー（人）たち
<i class="fas fa-users"> </i>
歩く（人）
<i class="fas fa-walking"> </i>
youtube（動画）
<i class="fab fa-youtube"> </i>
サンプルとコードのリストはここまでです。
以降は「大きさ」「色」の変更方法、「リスト」として使う方法を記した備忘録です。
大きさの変更
上記（あるいは原本）コードに赤い部分を追加する。
<i class="●●●●●● fa-○○"><i>
fa-○○部分は以下の中から選ぶこと。
上の方が小さく、下の方が大きい。
HTML
fa-xs
fa-sm
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
または通常のフォントと同じように、<span style="font-size: ○○○%;">と指定してもOK。
色の変更
HTMLで<span style="color: #○○○○○○;">を追記する。
サンプル
青色に変えています→
HTML
<p>青色に変えています→<span style="color: #○○○○○○;"><i class="●●●●●●"> </i></span></p>
リストに使う
HTMLのリスト系タグを変える。
サンプル
- ここに文章
- ここに文章
- ここに文章
HTML
<ul class="fa-ul">
<li><span class="fa-ul"><i class="far fa-check-square"> </i></span>ここに文章</li>
<li><span class="fa-ul"><i class="far fa-check-square"> </i></span>ここに文章</li>
<li><span class="fa-ul"><i class="far fa-check-square"> </i></span>ここに文章</li>
<ul>
以上、『Font Awesome サンプル＆コードリスト』でした。
