【WEBフォント】アイコンにFont Awesomeを利用する

   

レッスン

Font AwesomeはWEB上に簡単にアイコンを利用できる便利なサービスです。登録して利用する必要があるのでその説明をします。

Font Awesomeにメールアドレスを登録

Font Awesome – Start a New Project with a Kit

まずは上記サイトへ移動してください。

メールアドレスを入力、送信します。

メールを受信し、「Click to Confirm Your Email Address + Set Things Up」をクリックします。

上記ページへ移動しし、任意のパスワードを入力後「Set Password & Continue」をクリックします。

必要最低限の情報を入力して「All set. Let’s Go!」をクリック。

個人専用のIDが発行され、Font Awesomeの利用ができるようになります。

専用IDのCDNの利用が可能です。上記情報をheadタグの手前に挿入する事でFont Awesomeの表示が可能になります。

【注意】月間PV10,000まで

一応利用制限があり、月間PV10,000までです。月間PV10,000越えてしまうと、

上記のような警告が表示される。（特にサイト上に影響はないが、今後の事を考えるとなんかしらの対応が必要）

よく利用しそうなアイコン一覧

下記は、サイト制作でよく利用しそうな一般的なアイコンを一覧にしてみました。Font Awesomeのサイト上では英語で検索をしないとならないため目標のアイコンを探すのが大変かもしれないので、日本語で一覧にしてみました。

リスト表示、箇条書き、一覧、項目、ドット、丸、点、四角、スクエア

                   

矢印、リスト表示、一覧、箇条書き、項目、次のページへ、前のページへ、詳細ページへ、プルダウン

                                               

チェック、必須、リスト表示、箇条書き、項目等

         

注釈、※、説明、アスタリスク、コメント、米

         

一覧ページ、リストページを参照

           

一覧へ戻る、戻す

       

別ウィンドウを開く

           

ウィンドウを閉じる、クローズボタン、バツ

         

ダウンロード

   

お問い合わせ、メールを送る、コンタクトフォーム

           

電話、TEL、電話番号

           

地図、グーグルマップ、アクセス

     

ニュース、お知らせ、インフォメーション、トピックス

       

新しい記事・お知らせ、ペン、鉛筆

               

お気に入り、人気、ハート、星

                             

カレンダー、日程表、予定、スケジュール

       

コピー

       

写真、カメラ、画像

               

￥、円マーク、お金、金額、価格、料金

   

動画、ユーチューブ、再生

           

リスト表示、箇条書き、一覧、項目、ドット、丸、点、四角、スクエア

 f111

<i class="fas fa-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f111';
	font-weight:900;
}

 f111

<i class="far fa-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f111';
	font-weight:400;
}

 f22d

<i class="fas fa-genderless"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f22d';
}

 f192

<i class="fas fa-dot-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f192';
	font-weight:900;
}

 f192

<i class="far fa-dot-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f192';
	font-weight:400;
}

 f140

<i class="fas fa-bullseye"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f140';
}

 f0c8

<i class="fas fa-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0c8';
	font-weight:900;
}

 f0c8

<i class="far fa-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0c8';
	font-weight:400;
}

 f28d

<i class="fas fa-stop-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f28d';
	font-weight:900;
}

 f28d

<i class="far fa-stop-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f28d';
	font-weight:400;
}

矢印、リスト表示、一覧、箇条書き、項目、次のページへ、前のページへ、詳細ページへ、プルダウン

 f104

<i class="fas fa-angle-left"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f104';
}

 f105

<i class="fas fa-angle-right"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f105';
}

 f106

<i class="fas fa-angle-up"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f106';
}

 f107

<i class="fas fa-angle-down"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f107';
}

 f100

<i class="fas fa-angle-double-left"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f100';
}

 f101

<i class="fas fa-angle-double-right"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f101';
}

 f102

<i class="fas fa-angle-double-up"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f102';
}

 f103

<i class="fas fa-angle-double-down"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f103';
}

 f053

<i class="fas fa-chevron-left"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f053';
}

 f054

<i class="fas fa-chevron-right"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f054';
}

 f077

<i class="fas fa-chevron-up"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f077';
}

 f078

<i class="fas fa-chevron-down"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f078';
}

 f137

<i class="fas fa-chevron-circle-left"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f137';
}

 f138

<i class="fas fa-chevron-circle-right"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f138';
}

 f139

<i class="fas fa-chevron-circle-up"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f139';
}

 f13a

<i class="fas fa-chevron-circle-down"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f13a';
}

 f0d9

<i class="fas fa-caret-left"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0d9';
}

 f0da

<i class="fas fa-caret-right"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0da';
}

 f0d8

<i class="fas fa-caret-up"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0d8';
}

 f0d7

<i class="fas fa-caret-down"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0d7';
}

 f191

<i class="fas fa-caret-square-left"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f191';
}

 f152

<i class="fas fa-caret-square-right"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f152';
}

 f151

<i class="fas fa-caret-square-up"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f151';
}

 f150

<i class="fas fa-caret-square-down"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f150';
}

チェック、必須、リスト表示、箇条書き、項目等

 f00c

<i class="fas fa-check"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f00c';
}

 f14a

<i class="fas fa-check-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f14a';
	font-weight:900;
}

 f14a

<i class="far fa-check-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f14a';
	font-weight:400;
}

 f058

<i class="fas fa-check-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f058';
	font-weight:900;
}

 f058

<i class="far fa-check-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f058';
	font-weight:400;
}

注釈、※、説明、アスタリスク、コメント、米

 ff069

<i class="fas fa-asterisk"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f069';
}

 f621

<i class="fas fa-star-of-life"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f621';
}

 f791

<i class="fab fa-diaspora"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f791';
}

 f12a

<i class="fas fa-exclamation"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f12a';
}

 f06a

<i class="fas fa-exclamation-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f06a';
}

一覧ページ、リストページを参照

 f0ca

<i class="fas fa-list-ul"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0ca';
}

 f022

<i class="fas fa-list-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f022';
	font-weight:900;
}

 f022

<i class="far fa-list-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f022';
	font-weight:400;
}

 f03a

<i class="fas fa-list"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f03a';
}

 f142

<i class="fas fa-ellipsis-v"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f142';
}

 f141

<i class="fas fa-ellipsis-h"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f141';
}

一覧へ戻る、戻す

 f0e2

<i class="fas fa-undo"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0e2';
}

 f2ea

<i class="fas fa-undo-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f2ea';
}

 f3e5

<i class="fas fa-reply"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f3e5';
}

 f122

<i class="fas fa-reply-all"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f122';
}

別ウィンドウを開く

 f360

<i class="fas fa-external-link-square-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f360';
}

 f35d

<i class="fas fa-external-link-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f35d';
}

 f2d2

<i class="fas fa-window-restore"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f2d2';
	font-weight:900;
}

 f2d2

<i class="far fa-window-restore"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f2d2';
	font-weight:400;
}

 f24d

<i class="fas fa-clone"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f24d';
	font-weight:900;
}

 f24d

<i class="far fa-clone"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f24d';
	font-weight:400;
}

ウィンドウを閉じる、クローズボタン、バツ

 f00d

<i class="fas fa-times"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f00d';
}

 f057

<i class="fas fa-times-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f057';
	font-weight:900;
}

 f057

<i class="far fa-times-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f057';
	font-weight:400;
}

 f410

<i class="fas fa-window-close"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f410';
	font-weight:900;
}

 f410

<i class="far fa-window-close"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f410';
	font-weight:400;
}

ダウンロード

 f019

<i class="fas fa-download"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f019';
}

 f381

<i class="fas fa-cloud-download-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f381';
}

お問い合わせ、メールを送る、コンタクトフォーム

 f0e0

<i class="fas fa-envelope"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0e0';
	font-weight:900;
}

 f0e0

<i class="far fa-envelope"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0e0';
	font-weight:400;
}

 f199

<i class="fas fa-envelope-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f199';
}

 f1d8

<i class="fas fa-paper-plane"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f1d8';
	font-weight:900;
}

 f1d8

<i class="far fa-paper-plane"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f1d8';
	font-weight:400;
}

 f2c6

<i class="fab fa-telegram"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f2c6';
}

電話、TEL、電話番号

 f879

<i class="fas fa-phone-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f879';
}

 f095

<i class="fas fa-phone"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f095';
}

 f87b

<i class="fas fa-phone-square-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f87b';
}

 f098

<i class="fas fa-phone-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f098';
}

 f2a0

<i class="fas fa-phone-volume"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f2a0';
}

 f3cd

<i class="fas fa-mobile-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f3cd';
}

地図、グーグルマップ、アクセス

 f041

<i class="fas fa-map-marker"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f041';
}

 f3c5

<i class="fas fa-map-marker-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f3c5';
}

 f276

<i class="fas fa-map-pin"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f276';
}

ニュース、お知らせ、インフォメーション、トピックス

 f129

<i class="fas fa-info"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f129';
}

 f05a

<i class="fas fa-info-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f05a';
}

 f1ea

<i class="fas fa-newspaper"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f1ea';
	font-weight:900;
}

 f1ea

<i class="far fa-newspaper"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f1ea';
	font-weight:400;
}

新しい記事・お知らせ、ペン、鉛筆

 f304

<i class="fas fa-pen"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f304';
}

 f5ac

<i class="fas fa-pen-fancy"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f5ac';
}

 f5ad

<i class="fas fa-pen-nib"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f5ad';
}

 f14b

<i class="fas fa-pen-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f14b';
}

 f303

<i class="fas fa-pencil-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f303';
}

 f15c

<i class="fas fa-file-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f15c';
	font-weight:900;
}

 f15c

<i class="far fa-file-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f15c';
	font-weight:400;
}

 f573

<i class="fas fa-file-signature"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f573';
}

お気に入り、人気、ハート、星

 f0c6

<i class="fas fa-paperclip"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0c6';
}

 f067

<i class="fas fa-plus"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f067';
}

 f055

<i class="fas fa-plus-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f055';
}

 f0fe

<i class="fas fa-plus-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0fe';
	font-weight:900;
}

 f0fe

<i class="far fa-plus-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0fe';
	font-weight:400;
}

 f02e

<i class="fas fa-bookmark"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f02e';
	font-weight:900;
}

 f02e

<i class="far fa-bookmark"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f02e';
	font-weight:400;
}

 f004

<i class="fas fa-heart"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f004';
	font-weight:900;
}

 f004

<i class="far fa-heart"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f004';
	font-weight:400;
}

 f005

<i class="fas fa-star"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f005';
	font-weight:900;
}

 f005

<i class="far fa-star"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f005';
	font-weight:400;
}

 e01a

<i class="fab fa-microblog"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\e01a';
	font-weight:400;
}

 f4be

<i class="fas fa-hand-holding-heart"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f4be';
}

 f184

<i class="fab fa-gratipay"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f184';
}

 f559

<i class="fas fa-award"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f559';
}

カレンダー、日程表、予定、スケジュール

 f073

<i class="fas fa-calendar-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f073';
	font-weight:900;
}

 f073

<i class="far fa-calendar-alt"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f073';
	font-weight:400;
}

 f274

<i class="fas fa-calendar-check"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f274';
	font-weight:900;
}

 f274

<i class="far fa-calendar-check"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f274';
	font-weight:400;
}

コピー

 f0c5

<i class="fas fa-copy"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0c5';
	font-weight:900;
}

 f0c5

<i class="far fa-copy"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f0c5';
	font-weight:400;
}

 f24d

<i class="fas fa-clone"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f24d';
	font-weight:900;
}

 f24d

<i class="far fa-clone"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f24d';
	font-weight:400;
}

写真、カメラ、画像

 f030

<i class="fas fa-camera"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f030';
}

 f083

<i class="fas fa-camera-retro"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f083';
}

 f1c5

<i class="fas fa-file-image"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f1c5';
	font-weight:900;
}

 f1c5

<i class="far fa-file-image"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f1c5';
	font-weight:400;
}

 f03e

<i class="fas fa-image"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f03e';
	font-weight:900;
}

 f03e

<i class="far fa-image"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f03e';
	font-weight:400;
}

 f302

<i class="fas fa-images"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f302';
	font-weight:900;
}

 f302

<i class="far fa-images"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f302';
	font-weight:400;
}

￥、円マーク、お金、金額、価格、料金

 f157

<i class="fas fa-yen-sign"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f157';
}

 f1ec

<i class="fas fa-calculator"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f1ec';
}

動画、ユーチューブ、再生

 f03d

<i class="fas fa-video"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f03d';
}

 f167

<i class="fab fa-youtube"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f167';
}

 f431

<i class="fab fa-youtube-square"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f431';
}

 f04b

<i class="fas fa-play"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f04b';
}

 f144

<i class="fas fa-play-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f144';
	font-weight:900;
}

 f144

<i class="far fa-play-circle"></i>
span::before{
	font-family: 'FontAwesome';
	content: '\f144';
	font-weight:400;
}

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー（フリー）/ WEB講師（非常勤）/ 海外販売（法人）他

お仕事のご相談はお問い合わせフォームへお願いします。