【Font Awesome】使える！スタイル設定 まとめ

2022.08.20

Webアイコンフォント『Font Awesome』のスタイル設定に関する備忘録です。FontAwesomeの公式サイトで公開されているスタイリングのヒントをまとめています。(^_^)/

2022年6月に Font Awesome6 がリリースされていますが、このサイトで使っているテーマCocoonは Ver.5対応 のため、こちらの記事も Ver.5 の機能に沿って作成しています。

Font Awesome とは

Font Awesome（フォントオーサム） とは、Webサイトで表示できるWebアイコンフォントを配布するサービスです。有料版と無料版がありますが、無料版でも千点以上のアイコンが使えます。

見た目がイラストでもフォントとして扱うので、色やサイズを変える方法もフォントと同じです。

拡大しても画質が悪くならないのも特徴のひとつです。

　　　 　　

メニューやボタンなど、サイト内で目立たせたい場所に使うと効果的です。

テーマ『Cocoon』と FontAwesome

通常、Font Awesomeを使うには前もって準備が必要です。

ありがたいことに、WordPressの無料テーマ『Cocoon』では、すでに準備が完了した状態になっています。ただし、Ver.4 と Ver.5 が選べるので、Cocoon設定画面でどちらかを選択します。

バージョンによってアイコンの種類やスタイル設定方法が多少異なるので、どちらを選択しているかは最初に確認しておくことをお勧めします。

Cocoon設定 > 全体

［サイトアイコンフォント］の項目でバージョンを確認＆設定できます。

ところで、上（↑）に表示したピンクの補足ボックスに「i」のマークが表示されていますね。

このように、Cocoonブロックの中には FontAwesome を利用したものがあります。

それとは別に、HTMLやCSSの知識があれば記事本文に使うこともできるんです。

使いたい場所で思い通りの表示ができるよう、スタイル設定の基本を抑えておきましょう！

FontAwesomeをWordPressの記事内で使う

WordPressの記事内で、文章の中に自然な形で表示することができます。

その場合はコードを貼り付ける必要があるため、［カスタムHTML］ブロックを使います。

ブラウザ表示

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

簡単に挿入できるけど、

スタイルを指定してないと面白みがないね…

基本的な使い方

アイコンフォントはインライン要素として使うように設計されているので、通常のHTML文書作成と同じようにコードを記述します。親要素のスタイルを継承するのも通常のCSSと同じです。

こうした特徴を理解したうえで、CSSやstyle属性を使ってスタイルの設定をします。

Sample
<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 5 Free アイコンを探す ／

さまざまなスタイリング

Font Awesome では、スタイル設定用のクラスがいくつか用意されています。

それらを使ってスタイリングするか、独自のスタイルを作るかは自由ですが、作業の簡略化にもなるため、両方をうまく取り入れて活用するといいでしょう。

FontAwesomeにスタイルを設定するには…
  • 公式が用意したクラスを利用する。
  • 独自のクラスを追加してスタイルを設定する。
  • style属性を使って直接HTMLに記述する。
  • 公式クラスと独自クラス、style属性を組み合わせて使う。

どんなことができるのか…

スタイリング次第で様々な表示が可能ですが、公式サイトで紹介されている主なスタイル内容は次の通りです。

Size
大きさを変える
Color
アイコンの色を変える
Fixed－Width
幅を揃える
Icons in a List
リストアイコンとして使う
Rotate
回転・反転させる
Animate
アニメーション効果をつける
Border + Pull
枠線と左寄せ・右寄せ
Stack
アイコンを重ねる

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

用意されたクラスを使う

用意されたクラスは以下の通りです。「#」は2～10の数値で指定します。

クラスサイズ
fa-xs0.75em
fa-sm0.875em
fa-lg1.33em
fa-#xfa-2x　（２倍）
fa-4x　（４倍）
fa-6x　（６倍）
・　　　　　　
・　　　　　　
・　　　　　　
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の組み合わせで［番号あり］の箇条書きを作ります。

書き方の手順は次の通りです。

  1. ul、または、olにクラスfa-ulを追加します。
  2. <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を 使った場合…

  • 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;
}
＼ Font Awesome 5 Free アイコンを探す ／

Rotate ： 回転・反転させる

アイコンを回転させたり、水平・垂直方向に反転できます。

アイコンを回転するクラスの一覧

元のアイコン →

クラス角度・方向　サンプル　
fa-rotate-9090度
fa-rotate-180180度
fa-rotate-270270度

アイコンを回転（ミラー）するクラスの一覧

元のアイコン →

クラス方向　サンプル　
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版には少ないようです。

　
＼ Font Awesome 【Supinners】を見る ／

font-awesome-animation を利用すると、他にも面白いアニメーション効果を用いることができます。こちらの記事では割愛しますが、興味のある方はコチラをどうぞ。

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と組み合わせて使う。

設定方法は次の通りです。

  1. spanタグにfa-stackクラスを追加し、その中に2つのアイコンを記述します。
  2. 下になるほうのアイコンにfa-stack-2xクラスを追加します。
    （先に書いたほうが下になります。）
  3. 上にのせるアイコンにfa-stack-1xクラスを追加します。
Point

fa-stack-1xの指定と一緒にfa-inverseを加えると、色が反転して表示されます。
特にFree版で使えるアイコンにはfa-inverseが必要なものが多いです。

Point

親要素にサイズを指定することで、中のアイコンサイズを調整できます。

<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; /* 余白 */
}

fa-fwを入れることで、きれいに等幅を保っています。

fa-fwを入れないと、こうなる →　

オリジナル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;
}
＼ エックスサーバー ／
【初心者でも安心】たった10分で出来るWordPressブログの始め方
タイトルとURLをコピーしました