Font Awesome ホームページでよく使うアイコン一覧早見表
Font Awesome を華麗に使う
ホームページをおしゃれに、しかも高速に表示させるためには、Font Awesomeはなくてはならない存在になってきました。
当サイトのベースシステムには内蔵されていますが、そうでなくとも簡単に使えますから、head部にタグを追加するぐらいのことが可能であれば、是非利用されてみてください。
Awesome!
Font Awesomeとはアイコンを画像ではなくWebフォントとして表現してしまったものです。
文字なので、大きさや色などを変更することができ、レスポンシブには最適のツールです。
アイコン画像ならPC用とモバイル用に分けてCSSスプライト処理などをしなければなりませんが、文字ならその必要もありません。
まさに、”Awesome!”に相応しいツールと言えます！
下記をhead内に追記するだけで使えるようになります。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">スペース取りに使えるアイコン
サイズは左から順にlg(1.333倍)、2X、3x、4xで表示しています。
デフォルトのサイズは、次項「リスト先頭のアイコン」で表示したサイズで、その他に5xがあります。
スタイルシートでフォントのサイズをリストアップしてあれば、もっと細かなサイズ調整をすることもできます。
リスト先頭のアイコンとして使う
サイズは指定なしの標準サイズで統一して表示しています。
- fa-caret-right
- fa-caret-square-right
- fa-square
- fa-arrow-alt-circle-right
- fa-arrow-circle-right
- fa-circle
- fa-hand-point-right
- fa-check-square
- fa-check-circle
- fa-spin
<ul class="fa-ul">
<li><i class="fa-li fas fa-caret-right"></i></li>
<li><i class="fa-li fas fa-caret-square-right"></i></li>
<li><i class="fa-li fas fa-square"></i></li>
<li><i class="fa-li fas fa-arrow-alt-circle-right"></i></li>
<li><i class="fa-li fas fa-arrow-circle-right"></i></li>
<li><i class="fa-li fas fa-circle"></i>fa-circle</li>
<li><i class="fa-li fas fa-hand-point-right"></i></li>
<li><i class="fa-li fas fa-check-square"></i></li>
<li><i class="fa-li fas fa-check-circle"></i></li>
<li><i class="fa-li fas fa-spinner fa-spin"></i></li>
</ul>各種アイコン
サイズは2Xに統一して表示しています。
SNSアイコンでは、色が自由に変えれることを見ていただけます。
ホームページ全般
fa-home：ホーム
<span class="fas fa-home fa-2x fa-fw"></span>
fa-sitemap：サイトマップ
<span class="fas fa-sitemap fa-2x fa-fw"></span>
fa-bars：ハンバーガーメニュー
<span class="fas fa-bars fa-2x fa-fw"></span>
fa-globe：グローバル（地球）
<span class="fas fa-globe fa-2x fa-fw"></span>ロック・保護
fa-lock：個人保護情報/暗証番号etc
<span class="fas fa-lock fa-2x fa-fw"></span>
fa-shield-alt：個人保護情報etc
<span class="fas fa-shield-alt fa-2x fa-fw"></span>
fa-user-shield：個人保護情報etc
<span class="fas fa-user-shield fa-2x fa-fw"></span>
fa-key：個人保護情報/暗証番号etc
<span class="fas fa-key fa-2x fa-fw"></span>サーチ・設定
fa-search：サーチ
<span class="fas fa-search fa-2x fa-fw"></span>
fa-search-plus：サーチ
<span class="fas fa-search-plus fa-2x fa-fw"></span>
fa-search-minus ：サーチ
<span class="fas fa-search-minus fa-2x fa-fw"></span>
fa-cogs：設定
<span class="fas fa-cogs fa-2x fa-fw"></span>メール
fa-envelope：メール
<span class="fas fa-envelope fa-2x fa-fw"></span>
fa-envelope：メール
<span class="far fa-envelope fa-2x fa-fw"></span>
fa-envelope-square：メール
<span class="fas fa-envelope-square fa-2x fa-fw"></span>マップ
fa-map-marker：マップ
<span class="fas fa-map-marker fa-2x fa-fw"></span>
fa-map-marker-alt：マップ
<span class="fas fa-map-marker-alt fa-2x fa-fw"></span>
fa-map-signs：マップ
<span class="fas fa-map-signs fa-2x fa-fw"></span>SNS
fa-twitte：ツイッター
<span class="fab fa-twitter aqua fa-2x fa-fw"></span>
fa-twitter-square：ツイッター
<span class="fab fa-twitter-square aqua fa-2x fa-fw"></span>
fa-facebook：フェイスブック
<span class="fab fa-facebook blue fa-2x fa-fw"></span>
fa-facebook-square：フェイスブック
<span class="fab fa-facebook-square blue fa-2x fa-fw"></span>
fa-instagram：インスタグラム
<span class="fab fa-instagram crimson fa-2x fa-fw"></span>
fa-line：ライン
<span class="fab fa-line green fa-2x fa-fw"></span>電話
fa-phone：電話
<span class="fas fa-phone fa-2x fa-fw"></span>
fa-phone-volume：電話
<span class="fas fa-phone-volume fa-2x fa-fw"></span>
fa-phone-square：電話
<span class="fas fa-phone-square fa-2x fa-fw"></span>
fa-fax：FAX
<span class="fas fa-fax fa-2x fa-fw"></span>モバイル
fa-mobile：モバイル
<span class="fas fa-mobile fa-2x fa-fw"></span>
fa-mobile-alt：モバイル
<span class="fas fa-mobile-alt fa-2x fa-fw"></span>
fa-desktop ：デスクトップ
<span class="fas fa-desktop fa-2x fa-fw"></span>
fa-tablet：タブレット
<span class="fas fa-tablet fa-2x fa-fw"></span>ファイル・フォルダー
fa-folder ：フォルダー
<span class="fas fa-folder fa-2x fa-fw"></span>
fa-folder ：フォルダー
<span class="far fa-folder fa-2x fa-fw"></span>
fa-file：ファイル
<span class="fas fa-file fa-2x fa-fw"></span>
fa-file：ファイル
<span class="far fa-file fa-2x fa-fw"></span>
fa-file-alt：ファイル
<span class="fas fa-file-alt fa-2x fa-fw"></span>
fa-file-pdf：PDFファイル
<span class="fas fa-file-pdf fa-2x fa-fw"></span>
fa-file-pdf：PDFファイル
<span class="far fa-file-pdf fa-2x fa-fw"></span>
fa-file-image：ファイル
<span class="fas fa-file-image fa-2x fa-fw"></span>
fa-file-image：ファイル
<span class="far fa-file-image fa-2x fa-fw"></span>
fa-file-word：WORDファイル
<span class="fas fa-file-word fa-2x fa-fw"></span>
fa-file-word：WORDファイル
<span class="far fa-file-word fa-2x fa-fw"></span>
fa-file-excel：EXCELファイル
<span class="fas fa-file-excel fa-2x fa-fw"></span>
fa-file-excel：EXCELファイル
<span class="far fa-file-excel fa-2x fa-fw"></span>
fa-file-archive：圧縮ファイル
<span class="fas fa-file-archive fa-2x fa-fw"></span>
fa-file-archive：圧縮ファイル
<span class="far fa-file-archive fa-2x fa-fw"></span>RSS
fa-rss
<span class="fas fa-rss fa-2x fa-fw"></span>
fa-rss-square
<span class="fas fa-rss-square fa-2x fa-fw"></span>カレンダー
fa-calendar-alt
<span class="fas fa-calendar-alt fa-2x fa-fw"></span>
fa-calendar-alt
<span class="far fa-calendar-alt fa-2x fa-fw"></span>時計
fa-clock
<span class="fas fa-clock fa-2x fa-fw"></span>
fa-clock
<span class="far fa-clock fa-2x fa-fw"></span>
fa-user-clock
<span class="fas fa-user-clock fa-2x fa-fw"></span>引用符
fa-quote-left
<span class="fas fa-quote-left fa-2x fa-fw"></span>
fa-quote-right
<span class="fas fa-quote-right fa-2x fa-fw"></span>コメント
fa-comments
<span class="fas fa-comments fa-2x fa-fw"></span>
fa-comments
<span class="far fa-comments fa-2x fa-fw"></span>
comment
<span class="far fa-comment fa-2x fa-fw"></span>クエスチョン
fa-question
<span class="fas fa-question fa-2x fa-fw"></span>
fa-question-circle
<span class="fas fa-question-circle fa-2x fa-fw"></span>
fa-question-circle
<span class="far fa-question-circle fa-2x fa-fw"></span>エクスクラメーション
fa-exclamation
<span class="fas fa-exclamation fa-2x fa-fw"></span>
fa-exclamation-triangle
<span class="fas fa-exclamation-triangle fa-2x fa-fw"></span>
fa-exclamation-circle
<span class="fas fa-exclamation-circle fa-2x fa-fw"></span>顔文字
fa-sad-tear
<span class="fas fa-sad-tear fa-2x fa-fw"></span>
fa-sad-tear
<span class="far fa-sad-tear fa-2x fa-fw"></span>
fa-grin-tears
<span class="fas fa-grin-tears fa-2x fa-fw"></span>
fa-grin-tears
<span class="far fa-grin-tears fa-2x fa-fw"></span>
fa-grin-hearts
<span class="fas fa-grin-hearts fa-2x fa-fw"></span>
fa-grin-hearts
<span class="far fa-grin-hearts fa-2x fa-fw"></span>
fa-kiss-wink-heart
<span class="fas fa-kiss-wink-heart fa-2x fa-fw"></span>
fa-kiss-wink-heart
<span class="far fa-kiss-wink-heart fa-2x fa-fw"></span>
fa-grin-squint-tears
<span class="fas fa-grin-squint-tears fa-2x fa-fw"></span>
fa-grin-squint-tears
<span class="far fa-grin-squint-tears fa-2x fa-fw"></span>
fa-grin-beam-sweat
<span class="fas fa-grin-beam-sweat fa-2x fa-fw"></span>
fa-grin-beam-sweat
<span class="far fa-grin-beam-sweat fa-2x fa-fw"></span>ショップ
fa-store：お店
<span class="fas fa-store fa-2x fa-fw"></span>
fa-shopping-cart：ショッピングカート
<span class="fas fa-shopping-cart fa-2x fa-fw"></span>
fa-cart-arrow-down：ショッピングカート
<span class="fas fa-cart-arrow-down fa-2x fa-fw"></span>
fa-shopping-basket：ショッピングバスケット
<span class="fas fa-shopping-basket fa-2x fa-fw"></span>
fa-cc-paypal：Paypal
<span class="fab fa-cc-paypal fa-2x fa-fw"></span>
fa-cc-visa：VISAカード
<span class="fab fa-cc-visa fa-2x fa-fw"></span>
fa-cc-mastercard：MASTERカード
<span class="fab fa-cc-mastercard fa-2x fa-fw"></span>
fa-cc-jcb：JCBカード
<span class="fab fa-cc-jcb fa-2x fa-fw"></span>
fa-cc-amex：AMEXカード
<span class="fab fa-cc-amex fa-2x fa-fw"></span>
fa-cc-diners-club：Dinersカード
<span class="fab fa-cc-diners-club fa-2x fa-fw"></span>
fa-cc-discover：Discoverカード
<span class="fab fa-cc-discover fa-2x fa-fw"></span>電卓
fa-calculator：お会計（電卓）
<span class="fas fa-calculator fa-2x fa-fw"></span>性別・子ども。ベビー
fas fa-male：男性
<span class="fas fa-male fa-2x fa-fw"></span>
fa-female：女性
<span class="fas fa-female fa-2x fa-fw"></span>
fa-child：子ども
<span class="fas fa-child fa-2x fa-fw"></span>その他
fa-school：学校
<span class="fas fa-school fa-2x fa-fw"></span>
fa-university：大学
<span class="fas fa-university fa-2x fa-fw"></span>
fa-apple-alt：アップル
<span class="fas fa-apple-alt fa-2x fa-fw"></span>
fa-robot：ロボット
<span class="fas fa-robot fa-2x fa-fw"></span>