アイコンフォント「FontAwesome」の使い方

 
FontAwesomeはWebサイトや、ブログなどで簡単にアイコンを表示させることができるサービスです。バージョンアップや仕様変更を経て、現在ではPRO版(有料)も用意されています。無料版でも15,44種類(2019年10月現在)のアイコンが用意され、世界中で多くユーザーが利用しています。最近ではFontAwesomeへのユーザー登録が必須となりましたので、改めて初心者にも分かりやすいようにFontAwesomeの使い方を紹介します。





FontAwesomeの使い方




1

アイコンフォント「FontAwesome」とは?

アイコンフォントはWebフォントのアイコン版で、フォント同様にサイズ・色変更をCSSで調整することができます。以前のFontAwesomeではWebフォントはCSS、SVGはjavascriptで表示させてましたが、現在はJavaScriptのみでCSSかSVGを表示させる仕様となっています。

有料のPRO版は$99(年間)で利用することができます。(2019年10月現在)
PRO版は合計7,365のアイコンが使用することができ、アイコンの種類はSolid・Regular・light・Duotoneと4タイプ用意されています。

アイコンの種類も豊富にあり、Free版でも1,544種類のアイコンから選択することができ、以下のようによく使用されそうなアイコンも数多く用意されてます。


ソーシャル・PC系アイコン


ビジネス系アイコン


ブログ系アイコン


ショップ系アイコン




2

FontAwesomeのユーザー登録

FontAwesomeのサイトにアクセスに中央の「Start for Free 」ボタンをクリックします。

次に入力フォームにメールアドレスを入力して「Send Kit Code」ボタンをクリックします。

確認メールが入力したメールアドレス宛てに届くので「Click to Confirm Your Email Address + Set Things Up」をクリックします。表示されたページで、名前・パスワードを設定しユーザー登録完了です。




3

FontAwesome導入の準備

ログイン後に各kitsページに記載されているJavaScriptをコピーし、アイコンを表示させたいサイトのhead内にリンクを貼り付けて準備完了です。

html
<script src="https://kit.fontawesome.com/あなたのKit ID.js" crossorigin="anonymous"></script>

SVGで表示させたい場合

WebフォントではなくSVGで表示させたい場合は各Kitsページの右上にある「Settings」をクリックします。

SettingsページのTechnologyからSVGを選択して「Save Changes」をクリックします。

その他にSettingsではキット名・FontAwesomeのバージョンも変更することが可能です。

SVGで表示させる場合はCSSの疑似要素は使えません。



4

FontAwesomeの使用方法

FontAwesomeのIconsページから使用したいアイコンを探します。Free版で使用する場合は左メニューの「Free」をクリックすると検索しやすくなります。

使用したいアイコンが見つかったらアイコン詳細ページからコードをコピーし、表示させたい箇所にコードをペーストします。

html
<i class="fab fa-twitter"></i>

5

アイコンのカラーを変更する

アイコンのカラーはCSSで簡単に変更することができます。

html
<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-stroopwafel"></i>
</span>

<span style="font-size: 3em; color: Dodgerblue;">
  <i class="fas fa-stroopwafel"></i>
</span>

<span style="font-size: 3em;">
  <span style="color: Mediumslateblue;">
  <i class="fas fa-stroopwafel"></i>
  </span>
</span>

6

アイコンのサイズを変更する

FontAwesomeでサイズのclassが用意されているのでサイズを変更したい場合はclassにfa-xsfa-smfa-lgfa-2x~fa-10xを追加します。 もちろんオリジナルのCSSを追加しfont-sizeでサイズを変更することもできます。

html
<i class="fas fa-stroopwafel fa-xs"></i>
<i class="fas fa-stroopwafel fa-sm"></i>
<i class="fas fa-stroopwafel fa-lg"></i>
<i class="fas fa-stroopwafel fa-2x"></i>
<i class="fas fa-stroopwafel fa-3x"></i>
<i class="fas fa-stroopwafel fa-5x"></i>
<i class="fas fa-stroopwafel fa-7x"></i>
<i class="fas fa-stroopwafel fa-10x"></i>
fa-xs .75em
fa-sm .875em
fa-lg 1.33em (vertical-align: -25%)
fa-2x~fa-10x 2em~10em


7

アイコンの向きを変更する

角度のclassを追加することで角度(90°/180°/270°)反転(水平/垂直)を変更することができます。

html
<i class="fab fa-font-awesome"></i>
<i class="fab fa-font-awesome fa-rotate-90"></i>
<i class="fab fa-font-awesome fa-rotate-180"></i>
<i class="fab fa-font-awesome fa-rotate-270"></i>
<i class="fab fa-font-awesome fa-flip-horizontal"></i>
<i class="fab fa-font-awesome fa-flip-vertical"></i>
fa-rotate-90 90°
fa-rotate-180 180°
fa-rotate-270 270°
fa-flip-horizontal 水平(横)に反転
fa-flip-horizontal 垂直(縦)に反転

8

アイコンを回転させる

ローディングアニメーションで使えそうな回転するアイコンもclassにfa-spinを追加するだけで機能します。 fa-pulseにすると、8ステップで1回転するアニメーションとなります。

       
html
<i class="fas fa-spinner fa-spin"></i> 
<i class="fas fa-circle-notch fa-spin"></i> 
<i class="fas fa-sync fa-spin"></i> 
<i class="fas fa-cog fa-spin"></i> 
<i class="fas fa-spinner fa-pulse"></i> 


9

アイコンを使ったメニュー

ナビゲーションメニューもアイコンを配置するだけで視覚的にイメージが伝わりやすくなります。

css
.icon02 ul{
	list-style:none;
    border:solid 1px #DDD;
    border-bottom:none;
    }
.icon02 li a{ 
	color:#666;
    display:block;
    border-bottom:solid 1px #DDD;
    padding:10px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    }
.icon02 li a:hover{
	background-color:#F2F2F2;
	}
html
<div class="icon02">
<ul>
<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
<li><a href="#"><i class="fas fa-building"></i> Coporate</a></li>
<li><a href="#"><i class="far fa-handshake"></i> Business</a></li>
<li><a href="#"><i class="far fa-envelope"></i> Mail</a></li>
</ul>
</div>

10

疑似要素で使用する

CSSの疑似要素::before::afterでアイコンを表示させることもできます。CSS(Webフォント)FREE版での使用方法を紹介します。
アイコンを使用したい疑似要素::beforefont-family: "Font Awesome 5 Free";とUnicodecontent: "\f099"を記述します。
Unicodeは各アイコンページにてコピーできます。

twitterやfacebookなどのブランド系アイコン(classfab)を使用する場合はfont-family: "Font Awesome 5 Brands";となります。各アイコンのfont-familyの記述は以下のようになってます。

Solid (Free) Font Awesome 5 Free or Font Awesome 5 Pro (for pro users)
Regular (Pro) Font Awesome 5 Pro
Light (Pro) Font Awesome 5 Pro
Duotone (Pro) Font Awesome 5 Duotone
Brands (Free) Font Awesome 5 Brands
CSS
.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	}
 .login::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  }
  .tps::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
  }
  .twitter::before {
    font-family: "Font Awesome 5 Brands"; font-weight: 400;  content: "\f099";
  }
.icon01 ul{ 
	list-style: none; 
	display: flex;
	}
.icon01 li { 
	width: 33%;
	text-align: center;
	background-color:#666;
	height: 50px;
	line-height: 50px;
	margin:0 2px;
	}
.icon01 li a{ 
	display: block;
	color: #fff;
	}
.icon01 li a:hover{ 
	background-color:#999;
	}
html
<div class="icon01">
<ul>
<li><a href="#"><span class="icon login"></span> Login</a></li>
<li><a href="#"><span class="icon tps"></span> TPS Reports</a></li>
<li><a href="#"><span class="icon twitter"></span> Twitter</a></li>
</ul>
</div>

しかし、現バージョンのFontAwesomeでは不具合なのかfont-family: "Font Awesome 5 Free";の記述ではアイコンが表示されません。ちなみにfont-family: "Font Awesome 5 Pro";では問題なく表示されます。ドキュメントの例ではfont-family: "Font Awesome 5 Free";で表示できるとなってますがCSS Pseudo-elementsは、しばらく更新されていないようです。

以前のバージョンと比べ、機能が増えてだいぶ進化しているようですね。無料で簡単にアイコンを表示することができるので、興味のある人は使用してみてはいかがでしょうか。以上、アイコンフォント「FontAwesome」の使い方でした。




RELATED POSTS
  • Google Fontsの使い方とおすすめ日本語フォント -初心者向け-
  • 500種類以上のアイコンフォントとCSSのツールキット「Fontisto」
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • 無料で使用できる!450種類以上のラインアイコン「LineIcons」
PICKUP
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • フォントを調べる時に役に立つサービス・サイトまとめ
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 長いURLを短くする短縮URLサービス8選
RECENT POSTS
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • アイソメトリックなイラストを作成できるオンラインツール「Explore Isobuild」
  • Googleのプログラミング学習ツール「Grasshopper」にデスクトップ版がリリース
  • イメージワードを選択するだけでフリーフォントを簡単に検索できる「モジザイ」
TAG LIST
  • Webサービス

    84

  • CSS

    58

  • jQuery

    34

  • 素材

    30

  • エフェクト

    29

  • ジェネレーター

    25

  • JavaScript

    23