MENU
目次
リファレンス

コピペでできるFontAwesome導入方法とおすすめアイコン＆カスタマイズ法[V5.15.4]

Webパーツ
目次

Font Awesome導入方法/使い方

Font Awesomeは、ウェブデザインやウェブ開発においてアイコンやベクトル画像を簡単に利用できるアイコンフォントのライブラリです。Font Awesomeを使うことでWebページ上に簡単にアイコンを設置することが可能になり、ユーザーインターフェースを改善するのに役立ちます。

公式サイト
あわせて読みたい
Font Awesome The internet’s icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

Font Awesomeの最新バージョンは現在6です。V6では動的なアイコンやより複雑なアイコンを利用できる代わりに表示回数制限に限りがあり、以降は有料会員登録が必要になります。

ひとつ前のモデルであるV5では登録なしで利用可能で、制限も少なく無料で使用できるアイコンも豊富なので現在でも使っているWebサイトは少なくありません。今回は主にV5を対象に導入方法・おすすめアイコンを紹介していきます。

導入手順

導入手順はいたってシンプルで、ページのヘッダー部分(<head></head>)に以下のコードを張り付けることでFontAweSomeが提供しているアイコンが利用可能な状態になります。

CSS
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
JavaScript
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

利用可能になったら、FontAwesomeのアイコンリストから任意のアイコンを選んでコードをコピーして貼り付けることでアイコンが表示されるようになります。PRO表記がされているものは別途で有料会員登録が必要ですが、無料でも多くのアイコンが使用可能です。

V5のアイコン一覧
あわせて読みたい
Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome Search all the Version 5 icons and match your project with a look and feel that’s just right. Better yet, try Font Awesome 7 with more icons, styles, and packs.

よく使うおすすめのアイコンとコード一覧

Font Awesomeでは多くのアイコンが使用できますが、その中でもよく使うアイコンを厳選して紹介します。制作中のWebサイト開発等に参考にしてください。

Webサイト/機能

名称アイコンコード
ホーム <i class=”fas fa-home”></i>
検索 <i class=”fas fa-search”></i>
記事 <i class=”fas fa-newspaper”></i>
共有 <i class=”fas fa-share-alt”></i>
設定 <i class=”fas fa-cog”></i>
タグ <i class=”fas fa-tag”></i>
カテゴリ <i class=”far fa-folder”></i>
コメント <i class=”far fa-comment”></i>
ユーザー <i class=”far fa-user”></i>
メニュー <i class=”fas fa-bars”></i>
降順 <i class=”fas fa-sort-amount-down-alt”></i>
昇順 <i class=”fas fa-sort-amount-up-alt”></i>
天気 <i class=”fas fa-cloud-sun”></i>
温度 <i class=”fas fa-thermometer-quarter”></i>
位置 <i class=”fas fa-map-marker-alt”></i>
時計 <i class=”far fa-clock”></i>
カレンダー <i class=”far fa-calendar-alt”></i>
問い合わせ <i class=”fas fa-headset”></i>
RSS <i class=”fas fa-rss”></i>
再生 <i class=”far fa-play-circle”></i>
停止 <i class=”far fa-stop-circle”></i>
拡大 <i class=”fab fa-line”></i>
縮小 <i class=”fas fa-search-minus”></i>
電話 <i class=”fas fa-phone”></i>
メール <i class=”far fa-envelope”></i>
リンク <i class=”fas fa-link”></i>
注意 <i class=”fas fa-exclamation-triangle”></i>
不明 <i class=”fas fa-question-circle”></i>
インフォ <i class=”fas fa-info-circle”></i>
チェック <i class=”fas fa-check”>
リロード <i class=”fas fa-redo”></i>
サイトマップ <i class=”fas fa-sitemap”></i>
PC <i class=”fas fa-desktop”></i>
スマホ <i class=”fas fa-mobile-alt”></i>
タブレット <i class=”fas fa-tablet-alt”></i>
iOS <i class=”fab fa-app-store-ios”></i>
Android <i class=”fab fa-android”></i>

SNS/外部サイト

名称アイコンコード
Google <i class=”fab fa-google”></i>
Apple <i class=”fab fa-apple”></i>
Facebook <i class=”fab fa-facebook”></i>
Amazon <i class=”fab fa-amazon”></i>
Reddit <i class=”fab fa-reddit”></i>
Twitter <i class=”fab fa-twitter”></i>
Instagram <i class=”fab fa-instagram”></i>
LINE <i class=”fab fa-line”></i>
Pocket <i class=”fab fa-get-pocket”></i>
Pinterest <i class=”fab fa-pinterest”></i>
Vimeo <i class=”fab fa-vimeo”></i>
Flickr <i class=”fab fa-flickr”></i>
Tumblr <i class=”fab fa-tumblr”></i>
YouTube <i class=”fab fa-youtube”></i>
Dailymotion <i class=”fab fa-dailymotion”></i>
Spotify <i class=”fab fa-spotify”></i>
SoundCloud <i class=”fab fa-spundcloud”></i>
WordPress <i class=”fab fa-wordpress”></i>
Uber <i class=”fab fa-uber”></i>
Airbnb <i class=”fab fa-airbnb”></i>
github <i class=”fab fa-github”></i>
EC <i class=”fas fa-shopping-cart”></i>

評価

名称アイコンコード
グッド <i class=”fas fa-thumbs-up”></i>
バッド <i class=”fas fa-thumbs-down”></i>
ピース <i class=”fas fa-hand-peace”></i>
拍手 <i class=”fas fa-desktop”></i>
握手 <i class=”fas fa-search-plus”></i>
お願い <i class=”fas fa-praying-hands”></i>
口コミ <i class=”far fa-comments”></i>
マネー <i class=”fas fa-coins”></i>
ハート <i class=”fas fa-heart”></i>
ハート(破壊) <i class=”fas fa-heart-broken”></i>
スター <i class=”fas fa-star”></i>
スター(半分) <i class=”fas fa-star-half-alt”></i>
メガホン <i class=”fas fa-bullhorn”></i>
メロディ <i class=”fas fa-music”></i>
フラッグ <i class=”far fa-flag”></i>
アワード <i class=”fas fa-award”></i>
トロフィー <i class=”fas fa-trophy”></i>
メダル <i class=”fas fa-medal”></i>
ホット <i class=”fas fa-fire-alt”></i>
ブックマーク <i class=”fas fa-bookmark”></i>
アナリティクス <i class=”fas fa-chart-bar”></i>

矢印

名称アイコンコード
上矢印 <i class=”fas fa-chevron-up”></i>
下矢印 <i class=”fas fa-chevron-down”></i>
左矢印 <i class=”fas fa-chevron-left”></i>
右矢印 <i class=”fas fa-chevron-right”></i>
上アイコン <i class=”fas fa-caret-up”></i>
下アイコン <i class=”fas fa-caret-down”></i>
左アイコン <i class=”fas fa-bookmark”></i>
右アイコン <i class=”fas fa-caret-right”></i>
上指し <i class=”fas fa-hand-point-up”></i>
下指し <i class=”fas fa-hand-point-down”></i>
左指し <i class=”fas fa-hand-point-left”></i>
右指し <i class=”fas fa-hand-point-right”></i>
上下左右 <i class=”fas fa-arrows-alt”></i>
上昇 <i class=”fas fa-level-up-alt”></i>
下降 <i class=”fas fa-level-down-alt”></i>
上下 <i class=”fas fa-arrows-alt-v”></i>
左右 <i class=”fas fa-arrows-alt-h”></i>
斜め <i class=”fas fa-expand-alt”></i>
交差 <i class=”fas fa-random”></i>
交換 <i class=”fas fa-exchange-alt”></i>
アップロード <i class=”fas fa-cloud-upload-alt”></i>
ダウンロード <i class=”fas fa-cloud-download-alt”></i>
チャート <i class=”fas fa-chart-line”></i>

顔文字

名称アイコンコード
笑顔 <i class=”fas fa-smile”></i>
爆笑 <i class=”fas fa-laugh-squint”></i>
にっこり <i class=”fas fasmile-beam”></i>
笑い泣き <i class=”fas fa-grin-tears”></i>
ウインク <i class=”fas fa-laugh-wink”></i>
ハート <i class=”fas fa-grin-hearts”></i>
スター <i class=”fas fa-grin-stars”></i>
キス <i class=”fas fa-kiss”></i>
泣く <i class=”fas fa-sad-tear”></i>
号泣 <i class=”fas fa-sad-cry”></i>
焦り <i class=”fas fa-grin-beam-sweat”></i>
驚き <i class=”fas fa-surprise”></i>
疲れ <i class=”fas fa-tired”></i>
唖然 <i class=”fas fa-frown-open”></i>
虚ろ <i class=”fas fa-meh-rolling-eyes”></i>
怒る <i class=”fas fa-angry”></i>
不機嫌 <i class=”fas fa-frown”></i>
無表情 <i class=”fas fa-meh-blank”></i>
ダウン <i class=”fas fa-dizzy”></i>
どっきり <i class=”fas fa-flushed”></i>
歯ぎしり <i class=”fas fa-grimace”></i>
あっかんべー <i class=”fas fa-grin-tongue”></i>

アイコンのカスタマイズ[CSS]

色を変える

大きさを変える

角度を変える

外枠をつける

重ねる

回す(スムーズ)

回す(カクカク)

Webパーツ
  • URLをコピーしました！
目次