Font Awesome

Font Awesome 5 for CSS


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

Font Awesome 5 for JavaScript


<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js"></script>

Font Awesomeとは

　Font Awesomeとは、商用利用が可能で、自身のウェブサイトやアプリケーション、Wordや PDFなどのドキュメントにも埋め込める Webアイコンフォントです。

Webアイコンフォントとは

　Webアイコンフォントとは、pngや jpgとは違って、拡大しても粗くなることはなく、色やサイズなどを簡単に変えることができます。

Font Awesomeの５つのタイプ

　Brandsでは、Facebookや Twitter、YouTubeなどの企業やブランドのロゴを使うことができます。

Font Awesome無料版と有料版で違うところ

　Font Awesomeには無料版と有料版があります。では、無料版と有料版の違いはなんでしょうか？基本的には、無料版でも有料版でも商用利用がOKで、ウェブサイトやドキュメント内などで使用できます。無料版と有料版の違いは、使えるアイコンの数に差があります。公式サイトをご覧頂くと、無料プランでは使えないアイコンが存在します。また、無料プランではSolidタイプは使えてもLightタイプやDuotoneタイプは使えない、といったものも存在します。

Font Awesome 5 を使うには

サーバーにアップロードする

　Font Awesomeの公式サイトからアイコンをダウンロードし、通常の画像と同様にサーバにアップロードします。


<img width="90" height="102" src="book-solid.svg" alt="">

　この例は、サーバにアップロードした画像データ（SVG）をサイズの指定だけして呼び出しただけです。これを加工していくには、CSS、SVG、場合によっては JavaScriptなどの知識が必要となりますのでハードルが高いかもしれませんので、あらかじめ様々なツールが用意された CDNを利用した方が使いやすいと思います。

CDN を利用する

　CDNとは、Content Delivery Networkの略で、同じコンテンツをユーザーの端末に効率的に配布するために使われる仕組みです。

　例えば、Google Fontsや、JavaScriptのフレームワークである Vue.jsを利用するときにも CDNが使われたりします。

　Font Awesomeを CDNで利用する場合、CSSで読み込む方法と JavaScriptで読み込む方法があります。

CSSで CDNを読み込む

Font Awesome 5 for CSS


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

　これを head要素内に記載するのですが、バージョンや読み込みたいアイコンを限定する場合は、URLが違ってきますのでご注意ください。

JavaScriptで CDNを用いる

Font Awesome 5 for JavaScript


<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js"></script>

　CSSと同様にこれを head要素内に記載するのですが、やはりバージョンや読み込みたいアイコンを限定する場合は、URLが違ってきますのでご注意ください。

Font Awesome 5 を表示してみよう

　ここからは CDNを利用しての表示方法を確認していきます。

HTML に記述する

　Font AwesomeのアイコンのページにHTMLのコードが書いてありますので、それを表示したい場所に記述します。

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
	<i class="fas fa-clipboard"></i>
	<i class="far fa-clone"></i>
	<i class="fab fa-youtube"></i>
</body>

CSS に記載する

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
	<span class="icon1"></span>
	<span class="icon2"></span>
	<span class="icon3"></span>
</body>

CSS source


.icon1::before {
	content: '\f328';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.icon2::before {
	content: '\f24d';
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}

.icon3::before {
	content: '\f167';
	font-family: 'Font Awesome 5 Brands';
	font-weight: 400;
}

　ちょっと？複雑になりましたが同じ結果を得ることができました。

　contentのところに記述しているのは、Unicode（ユニコード）と呼ばれるものです。これも Font Awesomeのアイコンのページで確認することができます。

　HTMLと CSSのどちらを使っても Font Awesomeを使うことができますが、HTMLを使って記述する方が簡単なようです。特別な理由がない限り、CDNを利用して HTMLで表示させることをお勧めします。

表示した Font Awesome 5 を加工しよう

　Font Awesomeは Webアイコンフォントなので、自由に大きさや色を変えることができます。

大きさを変更する

　まずは、Font Awesomeの大きさを変更してみます。HTMLで Font Awesomeを表示するコードを記述した部分で、classを設定することができます。

　以下がデフォルトで設定されているクラスとその大きさです。

クラス名	スタイル
fa-xs	0.75em
fa-sm	0.875em
fa-lg	1.33em
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
	<i class="fas fa-book fa-xs"></i>
	<i class="fas fa-book fa-sm"></i>
	<i class="fas fa-book"></i>
	<i class="fas fa-book fa-lg"></i>
	<i class="fas fa-book fa-2x"></i>
	<i class="fas fa-book fa-3x"></i>
	<i class="fas fa-book fa-4x"></i>
	<i class="fas fa-book fa-5x"></i>
</body>

色を変える

　Font Awesomeは Webアイコンフォントなので、クラスを設定することで簡単に色を変えることができます。

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
	<i class="fas fa-3x fa-clipboard"></i>
	<i class="far fa-3x fa-clone"></i>
	<i class="fab fa-3x fa-youtube"></i>
</body>

CSS source


.fa-clipboard {
	color: red;
}

.fa-clone {
	color: green;
}

.fa-youtube {
	color: blue;
}

幅を統一する

　複数の Font Awesomeを読み込んだときに、それぞれのアイコンの幅が違うので表示が若干ズレてくる場合があります。そんなときは fa-fw というクラスを追加することで、アイコンの幅を揃えることができます。

　アイコンの幅を揃える前は、clipboardは特に左に寄ってるのが分かりますが、幅を揃えた後は全体の中心が揃っているのが確認できると思います。

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
	<i class="fas fa-3x fa-fw fa-clipboard"></i>
	<i class="far fa-3x fa-fw fa-clone"></i>
	<i class="fab fa-3x fa-fw fa-youtube"></i>
</body>

リストで用いる

　Font Awesomeをリストで用いるには、ul要素に fa-ul クラスを加え、アイコンを fa-li クラスの span要素で囲います。

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<body>
	<ul class="fa-ul">
		<li><span class="fa-li"><i class="fas fa-book"></i></span>HTML</li>
		<li><span class="fa-li"><i class="fas fa-quran"></i></span>CSS</li>
		<li><span class="fa-li"><i class="fas fa-journal-whills"></i></span>JavaScript</li>
		<li><span class="fa-li"><i class="fas fa-atlas"></i></span>PHP</li>
	</ul>
</body>

回転させる

　Font Awesomeを回転させてみます。回転に関しても、デフォルトで様々なクラスが用意されています。

クラス名	スタイル
fa-rotate-90	90°回転
fa-rotate-180	180°回転
fa-rotate-270	270°回転
fa-flip-horizontal	水平方向に反転
fa-flip-vartical	垂直方向に反転

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<body>
	<i class="fas fa-3x fa-fw fa-book"></i> normal<br>
	<i class="fas fa-3x fa-fw fa-book fa-rotate-90"></i> fa-rotate-90<br>
	<i class="fas fa-3x fa-fw fa-book fa-rotate-180"></i> fa-rotate-180<br>
	<i class="fas fa-3x fa-fw fa-book fa-rotate-270"></i> fa-rotate-270<br>
	<i class="fas fa-3x fa-fw fa-book fa-flip-horizontal"></i> fa-flip-horizontal<br>
	<i class="fas fa-3x fa-fw fa-book fa-flip-vertical"></i> fa-flip-vertical
</body>

　もちろん、デフォルト設定されているクラス以外にも、自分でクラスを設定して回転させることもできます。

ボーダーをつける

　Font Awesomeにボーダーをつけるには、fa-border クラスを追加するだけで簡単にできます。

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<body>
	<i class="fas fa-3x fa-book fa-border"></i>
</body>

重ねて表示する

　Font Awesomeは、重ねて表示することも容易にできます。fa-stackクラスを設定した中に Font Awesomeを記述することで重ねて表示することができます。

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<body>
	<span class="fa-stack fa-3x">
		<i class="fas fa-circle fa-stack-2x"></i>
		<i class="fas fa-book fa-stack-1x"></i>
	</span>
</body>

CSS source


.fa-circle {
	color: green;
}

アニメーションをつける

　Font Awesomeでは、デフォルトで回転などのアニメーションが設定されています。fa-spin クラスを設定することで回転アニメーションを設定でき、fa-pulse クラスを設定することでアニメーションを8ステップで設定できます。

　また、animated を animated-hover とすることで、ホバー時のみアニメーションを適用することができます。

　Font Awesomeには他にも様々なアニメーションがあるようです。

テキストを回り込み表示させる

　テキストを回り込み表示させてみます。fa-pull-left クラスを設定することで、float: left; を、fa-pull-right クラスを設定することで、float: right; を、設定することができます。

Sample on the left

　テキストを左側に回り込み表示させてみます。fa-pull-left クラスを設定することで、float: left; を、設定することができます。右側に回り込み表示させたい場合は、下のサンプルをご参照ください。

Sample on the right

　テキストを右側に回り込み表示させてみます。fa-pull-right クラスを設定することで、float: right; を、設定することができます。左側に回り込み表示させたい場合は、上のサンプルをご参照ください。

HTML source on the left


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<body>
	<p><i class="fas fa-3x fa-book fa-pull-left"></i>　テキストを左側に回り込み表示させてみます。fa-pull-left クラスを設定することで、float: left; を、設定することができます。右側に回り込み表示させたい場合は、下のサンプルをご参照ください。</p>
</body>

HTML source on the right


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<body>
	<p><i class="fas fa-3x fa-book fa-pull-right"></i>　テキストを右側に回り込み表示させてみます。fa-pull-right クラスを設定することで、float: right; を、設定することができます。左側に回り込み表示させたい場合は、上のサンプルをご参照ください。</p>
</body>

ドキュメントの本文

改行

ドキュメントのメタデータ

イタリック表記が通例のテキスト。

イメージ