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-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>
お問合せ・ご予約はこちら

お問合せ・ご予約はこちら

お気軽にお問合せください

お問合せ・ご予約は、フォームから受け付けております。

※芦屋市・西宮市・神戸市に限らず、当事務所にご来所可能な場合は、ハンズオン方式での最強・最速HP作成支援(時間制)をさせていただきます。
終えられた後は、自然に「自分で作りたい」となっていることでしょう。

お問合せ・ご予約(フォーム)はこちら