Font Awesome ホームページでよく使うアイコン一覧早見表
Font Awesome を華麗に使う
ホームページをおしゃれに、しかも高速に表示させるためには、Font Awesomeはなくてはならない存在になってきました。
当サイトのベースシステムには内蔵されていますが、そうでなくとも簡単に使えますから、head部にタグを追加するぐらいのことが可能であれば、是非利用されてみてください。
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アイコンでは、色が自由に変えれることを見ていただけます。
ホームページ全般
<span class="fas fa-home fa-2x fa-fw"></span>
<span class="fas fa-sitemap fa-2x fa-fw"></span>
<span class="fas fa-bars fa-2x fa-fw"></span>
<span class="fas fa-globe fa-2x fa-fw"></span>
ロック・保護
<span class="fas fa-lock fa-2x fa-fw"></span>
<span class="fas fa-shield-alt fa-2x fa-fw"></span>
<span class="fas fa-user-shield fa-2x fa-fw"></span>
<span class="fas fa-key fa-2x fa-fw"></span>
サーチ・設定
<span class="fas fa-search fa-2x fa-fw"></span>
<span class="fas fa-search-plus fa-2x fa-fw"></span>
<span class="fas fa-search-minus fa-2x fa-fw"></span>
<span class="fas fa-cogs fa-2x fa-fw"></span>
メール
<span class="fas fa-envelope fa-2x fa-fw"></span>
<span class="far fa-envelope fa-2x fa-fw"></span>
<span class="fas fa-envelope-square fa-2x fa-fw"></span>
マップ
<span class="fas fa-map-marker fa-2x fa-fw"></span>
<span class="fas fa-map-marker-alt fa-2x fa-fw"></span>
<span class="fas fa-map-signs fa-2x fa-fw"></span>
SNS
<span class="fab fa-twitter aqua fa-2x fa-fw"></span>
<span class="fab fa-twitter-square aqua fa-2x fa-fw"></span>
<span class="fab fa-facebook blue fa-2x fa-fw"></span>
<span class="fab fa-facebook-square blue fa-2x fa-fw"></span>
<span class="fab fa-instagram crimson fa-2x fa-fw"></span>
<span class="fab fa-line green fa-2x fa-fw"></span>
電話
<span class="fas fa-phone fa-2x fa-fw"></span>
<span class="fas fa-phone-volume fa-2x fa-fw"></span>
<span class="fas fa-phone-square fa-2x fa-fw"></span>
<span class="fas fa-fax fa-2x fa-fw"></span>
モバイル
<span class="fas fa-mobile fa-2x fa-fw"></span>
<span class="fas fa-mobile-alt fa-2x fa-fw"></span>
<span class="fas fa-desktop fa-2x fa-fw"></span>
<span class="fas fa-tablet fa-2x fa-fw"></span>
ファイル・フォルダー
<span class="fas fa-folder fa-2x fa-fw"></span>
<span class="far fa-folder fa-2x fa-fw"></span>
<span class="fas fa-file fa-2x fa-fw"></span>
<span class="far fa-file fa-2x fa-fw"></span>
<span class="fas fa-file-alt fa-2x fa-fw"></span>
<span class="fas fa-file-pdf fa-2x fa-fw"></span>
<span class="far fa-file-pdf fa-2x fa-fw"></span>
<span class="fas fa-file-image fa-2x fa-fw"></span>
<span class="far fa-file-image fa-2x fa-fw"></span>
<span class="fas fa-file-word fa-2x fa-fw"></span>
<span class="far fa-file-word fa-2x fa-fw"></span>
<span class="fas fa-file-excel fa-2x fa-fw"></span>
<span class="far fa-file-excel fa-2x fa-fw"></span>
<span class="fas fa-file-archive fa-2x fa-fw"></span>
<span class="far fa-file-archive fa-2x fa-fw"></span>
RSS
<span class="fas fa-rss fa-2x fa-fw"></span>
<span class="fas fa-rss-square fa-2x fa-fw"></span>
カレンダー
<span class="fas fa-calendar-alt fa-2x fa-fw"></span>
<span class="far fa-calendar-alt fa-2x fa-fw"></span>
時計
<span class="fas fa-clock fa-2x fa-fw"></span>
<span class="far fa-clock fa-2x fa-fw"></span>
<span class="fas fa-user-clock fa-2x fa-fw"></span>
引用符
<span class="fas fa-quote-left fa-2x fa-fw"></span>
<span class="fas fa-quote-right fa-2x fa-fw"></span>
コメント
<span class="fas fa-comments fa-2x fa-fw"></span>
<span class="far fa-comments fa-2x fa-fw"></span>
<span class="far fa-comment fa-2x fa-fw"></span>
クエスチョン
<span class="fas fa-question fa-2x fa-fw"></span>
<span class="fas fa-question-circle fa-2x fa-fw"></span>
<span class="far fa-question-circle fa-2x fa-fw"></span>
エクスクラメーション
<span class="fas fa-exclamation fa-2x fa-fw"></span>
<span class="fas fa-exclamation-triangle fa-2x fa-fw"></span>
<span class="fas fa-exclamation-circle fa-2x fa-fw"></span>
顔文字
<span class="fas fa-sad-tear fa-2x fa-fw"></span>
<span class="far fa-sad-tear fa-2x fa-fw"></span>
<span class="fas fa-grin-tears fa-2x fa-fw"></span>
<span class="far fa-grin-tears fa-2x fa-fw"></span>
<span class="fas fa-grin-hearts fa-2x fa-fw"></span>
<span class="far fa-grin-hearts fa-2x fa-fw"></span>
<span class="fas fa-kiss-wink-heart fa-2x fa-fw"></span>
<span class="far fa-kiss-wink-heart fa-2x fa-fw"></span>
<span class="fas fa-grin-squint-tears fa-2x fa-fw"></span>
<span class="far fa-grin-squint-tears fa-2x fa-fw"></span>
<span class="fas fa-grin-beam-sweat fa-2x fa-fw"></span>
<span class="far fa-grin-beam-sweat fa-2x fa-fw"></span>
ショップ
<span class="fas fa-store fa-2x fa-fw"></span>
<span class="fas fa-shopping-cart fa-2x fa-fw"></span>
<span class="fas fa-cart-arrow-down fa-2x fa-fw"></span>
<span class="fas fa-shopping-basket fa-2x fa-fw"></span>
<span class="fab fa-cc-paypal fa-2x fa-fw"></span>
<span class="fab fa-cc-visa fa-2x fa-fw"></span>
<span class="fab fa-cc-mastercard fa-2x fa-fw"></span>
<span class="fab fa-cc-jcb fa-2x fa-fw"></span>
<span class="fab fa-cc-amex fa-2x fa-fw"></span>
<span class="fab fa-cc-diners-club fa-2x fa-fw"></span>
<span class="fab fa-cc-discover fa-2x fa-fw"></span>
電卓
<span class="fas fa-calculator fa-2x fa-fw"></span>
性別・子ども。ベビー
<span class="fas fa-male fa-2x fa-fw"></span>
<span class="fas fa-female fa-2x fa-fw"></span>
<span class="fas fa-child fa-2x fa-fw"></span>
その他
<span class="fas fa-school fa-2x fa-fw"></span>
<span class="fas fa-university fa-2x fa-fw"></span>
<span class="fas fa-apple-alt fa-2x fa-fw"></span>
<span class="fas fa-robot fa-2x fa-fw"></span>
ディスカッション
コメント一覧
まだ、コメントがありません