【Font Awesome】のスタイル設定

Webアイコンフォント『Font Awesome』のスタイル設定に関する備忘録です。

公式サイトでは、あらかじめスタイル設定されたクラスを用意しているほか、活用方法のヒントが紹介されています。アイデア次第で面白い使い方ができると思います。

今回は、Font Awesome にスタイルを設定する方法をまとめています。

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

Font Awesome とは

【Font Awesome】とは、Webサイトで使えるWebアイコンフォントを配布するサービスです。有料版と無料版がありますが、無料版でも千点以上のアイコンが使えます。また、商用利用も可能です。

「見た目はアイコン、中身はフォント!」

アイコンの色やサイズを変える方法はフォントと同じ。しかも、拡大してもボヤけたりしません。

   

通常はFont Awesomeを使うには準備が必要ですが、なんと、テーマCocoonでは準備が完了した状態になっています。記事本文で使ったり、新しいボックスを作成るなどして活用しましょう。

基本的な使い方

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

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

Sample

スタイル設定なし →

  <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>

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

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

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

用意されたクラスを使う

HTMLファイルに次のコードを追加します。

WordPressの場合は[HTMLカスタム]ブロックを使います。

fa-xs0.75em
fa-sm0.875em
指定なし1em
fa-lg1.33em
<div>
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera"></i>
<i class="fas fa-camera fa-lg"></i>
</div>
fa-〇x〇=2~10までの数値(fa-1x、fa-2x、fa-3x ・・・ fa-10x)
<div>
<i class="fas fa-camera fa-1x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
</div>

style属性を使ってサイズを指定する

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>

CSSを使ってサイズを指定する

アイコンフォントのコードに新しいクラス名を追加し、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;}

相対的サイズの活用

アイコンフォントは親要素のスタイルを継承します。

親要素のフォントサイズが指定されている場合は子要素の基準値が変わるので、同じクラス名を使っていても表示される大きさが変わります。

3つのパターンを実験してみましょう。

親要素に異なるサイズ指定をして、アイコンフォントは同じ「fa-5x」を指定します。

<!-- 親要素にサイズを小さくする指定 -->
<span style="font-size: 0.5rem;">
   <i class="fas fa-camera fa-5x"></i>
</span>

<!-- 親要素にサイズ指定なし -->
<span>
   <i class="fas fa-camera fa-5x"></i>
</span>

<!-- 親要素にサイズを大きくする指定 -->
<span style="font-size: 2rem;">
   <i class="fas fa-camera fa-5x"></i>
</span>

あまり使うことは無いかもしれませんが、この手法なら相当大きな表示が可能になります。

「単位:rem」はルート要素サイズを「1」と考える単位です!

【ルート(基点)=htmlの一番上の要素】だよ!

アイコンの色を変える

style属性やCSSを使って色を指定できます。

 
<span>
    <i class="fas fa-camera fa-3x" style="color: pink;"></i> 
</span>

<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>

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要素を使います。

ulliの組み合わせで[番号なし]の箇条書きになり、

olliの組み合わせで[番号あり]の箇条書きを作ります。

コードの書き方は次の通りです。

  1. ul、または、olにクラスfa-ulを追加します。
  2. <li>~</li>の中の<i>タグは、クラスfa-liを追加したspanで囲みます。
  3. これで箇条書き用に調整された配置でアイコンが表示されます。
  • 春の花
  • 夏の花
  • 秋の花
  • 冬の花
<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 {
    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;
}

このクラスを使うメリットは、アイコンの幅が綺麗に揃うことです。

同じアイコンを使う場合は目立ちませんが、行ごとに違うアイコンを使うとハッキリわかります。

fa-ulと、fa-liを使わなかった場合…
coffee
beer
martini
wine

かなりガチャガチャしちゃいますね。

fa-ulfa-liを 使った場合…
  • coffee
  • beer
  • martini
  • wine

垂直方向が揃ったリストが出来上がります。

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-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-rightfa-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>

枠線で囲む

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 {
    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を入れないと、こうなる → 

オリジナルCSSを追加する 2

枠線にアレンジを加えてみましょう。

.fa-sample-box2{
   border: 2px solid silver; /* 枠線 */
   border-radius: 8px; /*枠線の角丸設定*/
   padding: 0.5em; /* 余白 */
}

背景に色を付ける

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;
}

タイトルとURLをコピーしました