Webアイコンフォント『Font Awesome』のスタイル設定に関する備忘録です。FontAwesomeの公式サイトで公開されているスタイリングのヒントをまとめています。(^_^)/
Font Awesome とは
Font Awesome(フォントオーサム) とは、Webサイトで表示できるWebアイコンフォントを配布するサービスです。有料版と無料版がありますが、無料版でも千点以上のアイコンが使えます。
見た目がイラストでもフォントとして扱うので、色やサイズを変える方法もフォントと同じです。
拡大しても画質が悪くならないのも特徴のひとつです。
メニューやボタンなど、サイト内で目立たせたい場所に使うと効果的です。
テーマ『Cocoon』と FontAwesome
通常、Font Awesomeを使うには前もって準備が必要です。
ありがたいことに、WordPressの無料テーマ『Cocoon』では、すでに準備が完了した状態になっています。ただし、Ver.4 と Ver.5 が選べるので、Cocoon設定画面でどちらかを選択します。
バージョンによってアイコンの種類やスタイル設定方法が多少異なるので、どちらを選択しているかは最初に確認しておくことをお勧めします。
ところで、上(↑)に表示したピンクの補足ボックスに「i」のマークが表示されていますね。
このように、Cocoonブロックの中には FontAwesome を利用したものがあります。
それとは別に、HTMLやCSSの知識があれば記事本文に使うこともできるんです。
使いたい場所で思い通りの表示ができるよう、スタイル設定の基本を抑えておきましょう!
FontAwesomeをWordPressの記事内で使う
WordPressの記事内で、文章の中に自然な形で表示することができます。
その場合はコードを貼り付ける必要があるため、[カスタムHTML]ブロックを使います。

ブラウザ表示
秋の紅葉シーズン到来!家族でドライブ に出かけました。

簡単に挿入できるけど、
スタイルを指定してないと面白みがないね…
基本的な使い方
アイコンフォントはインライン要素として使うように設計されているので、通常のHTML文書作成と同じようにコードを記述します。親要素のスタイルを継承するのも通常のCSSと同じです。
こうした特徴を理解したうえで、CSSやstyle属性を使ってスタイルの設定をします。
<p>
<i class="fas fa-camera"></i>
</p>
FontAwesomeのコードを貼り付けただけ(スタイル設定「なし」)の場合…
ブラウザ表示
フォントサイズ、カラーのスタイルを指定してみます。
<p>
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 48px; color: Dodgerblue;">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 3rem;">
<span style="color: Mediumslateblue;">
<i class="fas fa-camera"></i>
</span>
</span>
</p>
さまざまなスタイリング
Font Awesome では、スタイル設定用のクラスがいくつか用意されています。
それらを使ってスタイリングするか、独自のスタイルを作るかは自由ですが、作業の簡略化にもなるため、両方をうまく取り入れて活用するといいでしょう。
どんなことができるのか…
スタイリング次第で様々な表示が可能ですが、公式サイトで紹介されている主なスタイル内容は次の通りです。
- Size
- 大きさを変える
- Color
- アイコンの色を変える
- Fixed-Width
- 幅を揃える
- Icons in a List
- リストアイコンとして使う
- Rotate
- 回転・反転させる
- Animate
- アニメーション効果をつける
- Border + Pull
- 枠線と左寄せ・右寄せ
- Stack
- アイコンを重ねる
Size : アイコンのサイズを変更する
用意されたクラスを使う
用意されたクラスは以下の通りです。「#」は2~10の数値で指定します。
クラス | サイズ |
---|---|
fa-xs | 0.75em |
fa-sm | 0.875em |
fa-lg | 1.33em |
fa-#x | fa-2x (2倍) fa-4x (4倍) fa-6x (6倍) ・ ・ ・ fa-10x (10倍) |
使うときは、<i class="~">
の中にクラスを追加記入します。
<div>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-4x"></i>
<i class="fas fa-camera fa-10x"></i>
</div>
継承スタイルを活用する
fa-10x
より大きく表示したい場合などは、親要素のスタイル継承を活用できます。
同じfa-5x
を指定し、親要素にサイズ指定がある場合とない場合を比較してみます。
<!-- 親要素にサイズ指定なし -->
<span>
<i class="fas fa-camera fa-5x"></i>
</span>
<!-- 親要素にサイズを大きくする指定 -->
<span style="font-size: 2em;">
<i class="fas fa-camera fa-5x"></i>
</span>
その他のサイズを指定する
用意されたクラスを使わずに、style属性やCSSを使って独自のサイズを指定することもできます。
style属性を使ってサイズを指定する
HTML編集で<class="~">
の中にstyle属性を直接書いて指定します。
← 指定なし
<div>
<i class="fas fa-camera" style="font-size: 0.8em;"></i>
<i class="fas fa-camera" style="font-size: 2em;"></i>
<i class="fas fa-camera" style="font-size: 48px;"></i>
</div>
新しいクラスを追加してサイズを指定する
<class=”~”>の中に新しいクラス名を追加し、CSSでスタイルを指定します。
<i class="fas fa-camera my-big"></i>
<i class="fas fa-camera my-small"></i>
.my-big{font-size: 48px;}
.my-small{font-size: 14px;}
Color : アイコンの色を変える
style属性やCSSを使って色を指定できます。
<i>に直接追加、または、親要素に指定できます。
スタイル属性
<span>
<i class="fas fa-camera fa-3x" style="color: pink;"></i>
</span>
<span style="font-size: 3rem; color: #7b68ee;">
<i class="fas fa-camera"></i>
</span>
クラス追加
<span style="font-size: 48px;">
<i class="fas fa-camera tomato"></i>
</span>
<span style="font-size: 48px;" class="dodgerblue">
<i class="fas fa-camera"></i>
</span>
.tomato { color: Tomato;}
.dodgerblue { color: #1e90ff;}
Fixed Width Icons : 幅を揃える
アイコンは、それぞれの幅が微妙に違います。
アイコンを縦に並べた時や、アイコンに続けてテキストを入力している場合に目立ってしまいます。
そこでクラスfa-fw
を追加すると、同じ幅に揃えることができます。

<div>
<i class="fas fa-skating fa-fw"></i><br>
<i class="fas fa-skiing fa-fw"></i><br>
<i class="fas fa-skiing-nordic fa-fw"></i><br>
<i class="fas fa-snowboarding fa-fw"></i><br>
<i class="fas fa-snowplow fa-fw"></i>
</div>
Icons in a List : リストアイコンとして使う
HTMLで箇条書きを作るには、ul、ol、li要素を使います。
fa-ul
とfa-li
を追加すると、簡単にリストアイコンとして表示できます。

ul
とli
の組み合わせで[番号なし]の箇条書きになり、
ol
とli
の組み合わせで[番号あり]の箇条書きを作ります。
書き方の手順は次の通りです。
ul
、または、ol
にクラスfa-ul
を追加します。<li>~</li>
の中の<i>
タグは、クラスfa-li
を追加したspan
で囲みます。
これだけで箇条書き用に調整されてアイコンが表示されます。
- 春の花
- 夏の花
- 秋の花
- 冬の花
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-seedling"></i></span>春の花</li>
<li><span class="fa-li"><i class="fas fa-seedling"></i></span>夏の花</li>
<li><span class="fa-li"><i class="fas fa-seedling"></i></span>秋の花</li>
<li><span class="fa-li"><i class="fas fa-seedling"></i></span>冬の花</li>
</ul>

fa-ul
とfa-li
はセットで使う!
と覚えとこう!
このクラスを使うメリットは、fa-fw
を使わなくてもアイコンの幅が綺麗に揃うことです。
同じアイコンを使う場合は目立ちませんが、行ごとに違うアイコンを使うとハッキリわかります。

アイコンの並びが美しくな~い!
fa-ul
とfa-li
を 使った場合…
- coffee
- beer
- martini
- wine

キレイに並びました!
【覚え書き】fa-ul、fa-liのスタイル内容
.fa-ul {
list-style-type: none;
margin-left: 2.5em;
padding-left: 0;
}
.fa-li {
left: -2em;
position: absolute;
text-align: center;
width: 2em;
line-height: inherit;
}
Rotate : 回転・反転させる
アイコンを回転させたり、水平・垂直方向に反転できます。
アイコンを回転するクラスの一覧
元のアイコン →
クラス | 角度・方向 | サンプル |
---|---|---|
fa-rotate-90 | 90度 | |
fa-rotate-180 | 180度 | |
fa-rotate-270 | 270度 |
アイコンを回転(ミラー)するクラスの一覧
元のアイコン →
クラス | 方向 | サンプル |
---|---|---|
fa-flip-horizontal | 水平 | |
fa-flip-vertical | 垂直 | |
fa-flip-both | 水平・垂直 |
任意の角度に回転する
角度を指定するにはtransform: rotate()を使い、degという単位で角度を指定します。
元のアイコン → このアイコンの角度を変えてみましょう。
<i class="fas fa-map-pin fa-3x fa-ratate-20"></i>
<i class="fas fa-map-pin fa-3x fa-ratate-330"></i>
.fa-ratate-20{transform: rotate(20deg); /*角度20度*/}
.fa-ratate-330{transform: rotate(330deg);/*角度330度*/}
20度 →
330度→
色の指定を追加することもできます。
<div>
<p>
<i class="fas fa-map-pin fa-3x fa-ratate-20 color-pink"></i>
<i class="fas fa-map-pin fa-3x fa-ratate-20 color-palegreen"></i>
<i class="fas fa-map-pin fa-3x fa-ratate-20 color-skyblue"></i>
</p>
<p>
<i class="fas fa-map-pin fa-3x fa-ratate-330 color-skyblue"></i>
<i class="fas fa-map-pin fa-3x fa-ratate-330 color-palegreen"></i>
<i class="fas fa-map-pin fa-3x fa-ratate-330 color-pink"></i>
</p>
</div>
.color-pink{color: pink;}
.color-palegreen{color: palegreen;}
.color-skyblue{color: skyblue;}
Animate : アニメーション効果を設定する
クラス | 方向 | サンプル |
---|---|---|
fa-spin | 回転 | |
fa-pulse | 脈 |
回転アニメーションに適したアイコンは?
こちらの回転効果はどのアイコンにも設定できます。
が、
カテゴリ【spinners】内のアイコンは、わりと回転に向いた形が揃っています。fa-pulse
(脈動)効果を発揮できるアイコンは、Free版には少ないようです。
Border + Pull : 枠線と回り込み
アイコンの周囲に枠線を付けたり、引用文に使う『引用符』としてテキストを回り込み表示させることができます。
クラス | スタイル | サンプル |
---|---|---|
fa-border | アイコンを枠線で囲む | |
fa-pull-right | テキストの回り込み(右) | 下を参照 |
fa-pull-left | テキストの回り込み(左) | 下を参照 |
引用ボックスのデザインに使われることが多いです。
fa-pull-left
を使って、アイコンをテキストの左側に配置します。
【サンプル文書】Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further… And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
<div style="padding: 20px; background: #333; color: #fff; width: 85%; border-radius: 10px; margin: 0 auto;">
<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
<p>Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
</p>
</div>

「pull」は「引っぱる!」って意味だね。

「左側に引っ張る」からpull-left、
「右側に引っ張る」からpull-right、
って覚えるとわかりやすいブー
fa-pull-right
+ fa-border
で、枠に囲まれたアイコンをボックスの右側に。
【サンプル文書】Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further… And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
<div style="padding: 20px; border: solid 2px #666; width: 85%; border-radius: 10px; margin: 0 auto;">
<i class="fas fa-arrow-right fa-2x fa-pull-right fa-border"></i>
<p>Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
</p>
</div>
Stack : アイコンを重ねて表示する
複数のアイコンを重ねて表示することができます。
+ → 重ねると…
使うクラス
クラス | 使い方 |
---|---|
fa-stack | 親要素に追加する。 |
fa-stack-1x | 小さいほうのアイコンに使用する。 |
fa-stack-2x | 大きいほうのアイコンに使用する。 |
fa-inverse | 色を反転。fa-stack-1xと組み合わせて使う。 |
設定方法は次の通りです。
span
タグにfa-stack
クラスを追加し、その中に2つのアイコンを記述します。- 下になるほうのアイコンに
fa-stack-2x
クラスを追加します。
(先に書いたほうが下になります。) - 上にのせるアイコンに
fa-stack-1x
クラスを追加します。
fa-stack-1x
の指定と一緒にfa-inverse
を加えると、色が反転して表示されます。
特にFree版で使えるアイコンにはfa-inverse
が必要なものが多いです。
親要素にサイズを指定することで、中のアイコンサイズを調整できます。
<div>
<span class="fa-stack fa-2x">
<i class="far fa-square fa-stack-2x"></i>
<i class="fas fa-home fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fas fa-square fa-stack-2x"></i> <!-- 下のアイコン -->
<i class="fas fa-frown fa-stack-1x fa-inverse"></i> <!-- 上のアイコン -->
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i> <!-- 下のアイコン -->
<i class="fas fa-phone fa-stack-1x fa-inverse"></i> <!-- 上のアイコン -->
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i> <!-- 下のアイコン -->
<i class="fab fa-flag fa-stack-1x fa-inverse"></i> <!-- 上のアイコン -->
</span>
</div>
別のスタイルを加えると、違う演出で楽しめます。
上になるアイコンに色を指定したものです。
<span class="fa-stack fa-2x">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-capsules fa-stack-1x"></i>
<i class="fas fa-times fa-stack-2x" style="color:rgba(245, 93, 66, .5)"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-capsules fa-stack-1x"></i>
<i class="fas fa-question fa-stack-2x" style="color:rgba(66, 69, 245, .3)"</i>
</span>
土台に向いてるアイコン
Free版で使えるアイコンの中で、土台に使えそうなものを探してみました。
万能タイプ
square | <i class="fas fa-square"></i> | |
spuare-full | <i class="fas fa-square-full"></i> | |
square | <i class="far fa-square"></i> | |
circle | <i class="fas fa-circle"></i> | |
certificate | <i class="fas fa-certificate"></i> |
乗せるものを選ぶタイプ
star | <i class="fas fa-star"></i> | |
sticky-note | <i class="fas fa-sticky-note"></i> | |
file | <i class="fas fa-file"></i> |
今までの応用:アイコンの角度や向きを変えて使う
同じアイコンでも、乗せるもの、向き、角度で雰囲気が変わります。
色々と試してみると面白そうですね。
<span class="fa-stack fa-2x">
<i class="fas fa-file fa-stack-2x"></i>
<i class="fas fa-marker fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-file fa-stack-2x"></i>
<i class="fas fa-marker fa-stack-1x fa-inverse fa-flip-horizontal"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-file fa-stack-2x"></i>
<i class="fas fa-marker fa-stack-1x fa-inverse fa-rotate-90"></i>
</span>
border : 枠線で囲む
CSSで枠線を指定するにはborder属性を使います。
Font Awesome には、枠線を設定するクラスfa-border
が用意されていますが、独自にスタイルを設定したい場合にはCSSを使うといいでしょう。
また、クラスfa-fw
を併用すると、形の違うアイコンでも幅を揃えられます。
クラスfa-border
を使う場合
<div>
<i class="fas fa-arrow-left fa-border" title="戻る"></i>
<i class="fas fa-arrow-right fa-border" title="戻る"></i>
</div>
【覚え書き】fa-borderのスタイル内容
.fa-border {
border: 0.08em solid #eee;
border-radius: 0.1em;
padding: 0.2em 0.25em 0.15em;
}
オリジナルCSSを追加する
<span class="fa-sample-box1">
<i class="fas fa-arrow-left fa-fw" title="戻る"></i>
</span>
<span class="fa-sample-box1">
<i class="fas fa-arrow-right fa-fw" title="進む"></i>
</span>
<span class="fa-sample-box1">
<i class="fas fa-angle-double-right fa-fw"></i>
</span>
<span class="fa-sample-box1">
<i class="fas fa-angle-right fa-fw"></i>
</span>
.fa-sample-box1{
border: 1px solid silver; /* 枠線 */
padding: 0.5em; /* 余白 */
}
オリジナルCSSを追加する 2
スタイルをアレンジしてみましょう。
<span class="fa-sample-box2">
<i class="fas fa-arrow-left fa-fw" title="戻る"></i>
</span>
<span class="fa-sample-box2">
<i class="fas fa-arrow-right fa-fw" title="進む"></i>
</span>
<span class="fa-sample-box2">
<i class="fas fa-angle-double-right fa-fw"></i>
</span>
<span class="fa-sample-box2">
<i class="fas fa-angle-right fa-fw"></i>
</span>
.fa-sample-box2{
border: 2px solid silver; /* 枠線 */
border-radius: 8px; /*枠線の角丸設定*/
padding: 0.5em; /* 余白 */
}
Background : 背景に色を付ける
CSSで背景色を指定するにはbackground-color属性を使います。
背景色と文字色を指定しています。
<span class="fa-sample-box3">
<i class="fas fa-info fa-fw"></i>
</span>
<span class="fa-sample-box3">
<i class="fas fa-question fa-fw"></i>
</span>
<span class="fa-sample-box4">
<i class="far fa-smile fa-fw"></i>
</span>
<span class="fa-sample-box4">
<i class="fas fa-key fa-fw"></i>
</span>
.fa-sample-box3{
background-color: #1e50a2;/* 背景色(青色) */
color: #fff; /*文字色*/
border-radius: 0.25em;
padding: 0.5em;
}
.fa-sample-box4{
background-color: #ffc107; /* 背景色(黄色)*/
color: #fff;
border-radius: 0.25em;
padding: 0.5em;
}
おまけ : 背景を円形にする
.fa-sample-box5{
background-color: #ffc107;
color: #fff;
font-size: 30px;
border-radius: 50%;
text-align: center;
padding: 3px 0;
width: 56px;
height: 56px;
}
