FontAwesomeをSVGで使用する【JavaScriptなし】

はじめに

「FontAwesomeをJavaScriptなしで使用する方法」または、「FontAwesomeの一部のアイコンを使用する方法」です。

JavaScript無効環境でFontAwesomeを使用したページを閲覧すると文字化けしたような表示になるのを目にします。そうなるのを防ぐため、FontAwesomeをJavaScriptなしで使用します。または、FontAwesomeは、使用しないアイコンも含めてすべてのアイコンを読み込むため、数個のアイコンのみを使用する場合、不必要なコストが掛かります。それを回避するため、必要なアイコンのみを読み込んで使用します。

FontAwesomeは、上記の方法をPNG画像でも実現できます。ですが今回は、後述する理由によりSVGを利用して実現します。


ちなみに、JavaScript無効環境だと次のように文字化けします。

文字化けサンプル

SVGを取得する

GitHubにSVGファイルが格納されているので取得できます。

  • GitHub - FortAwesome/Font-Awesome
    • svgsフォルダにスタイル毎で格納されています
    • solid(塗りつぶし)、regular(線・標準の太さ)、brands(ブランド)

SVGのファイル名は、公式のサイトから検索できます。

SVGを使用する

SVGは、useタグで複数回呼び出して使い回せます。定義部でSVGを定義して、useタグで呼び出して使用します。CSSで文字色やサイズを指定します。使用箇所に直接記述することもできますが、後述するライセンス記載場所が問題となるため、useタグで使いまわして使用します。

定義部

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
  <defs>
    <symbol id="fa-search" viewbox="..."><path d="..."/></symbol>
    ...
    <symbol id="fa-..." viewbox="..."><path d="..."/></symbol>
  </defs>
</svg>

※symbol単位でSVGを定義する


具体的には、次のような書き換えを使用するファイル毎に行います。

例:search.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 ... 128-128 128z"/></svg>
↓↓↓
<symbol id="fa-search" viewbox="0 0 512 512"><path d="M505 442.7L405.3 ... 128-128 128z"/></symbol>

呼び出し部

<svg class="fa fa-search"><use xlink:href="#fa-search"/></svg>

CSS

.fa {
  /* 領域を確保する */
  width: 1em;
  height: 1em;
  /* 前後の間隔を確保する */
  margin: 0 0.25em;
  /* 文字列と高さをあわせる */
  vertical-align: -0.125em;
  /* 文字色をあわせる */
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}
.fa-flip-horizontal {
  /* ひっくり返す */
  transform: scale(-1, 1);
}
#fa-search {
  /* 個別に指定するものがあれば、記載する(SVGに関わるもの、色など) */
  /*color: #666; */
}
.fa-search {
  /* 個別に指定するものがあれば、記載する(領域に関するもの) */
  /* 変更不要ならclassを追加しなくても良い */
  /*width: 2em; */
  /*height: 2em; */
  /*float: right; */
}

ライセンスを記載する

CSS版やJavaScript版は、コードの先頭にライセンスが記載されているため、新たに追記する必要はありません。ですが、SVGを抜き出す場合、使用者側でライセンスを記載する必要があります。

今回は、「JavaScriptのライセンス記載と同程度の記載」でかつ「部分的に組み合わせて使用されていることがわかる記載」とするため、次のようにライセンスを記載します。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
<!--
This SVG is used in combination with some of the following libraries:
Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
  <defs>
    ...
  </defs>
</svg>

※バージョンは適時変更して下さい
※サイト内に「権利表記」のようなページを作成して、そこに記載することもできます


ちなみに、JavaScriptコード上のライセンス記載は以下の通りでした。

/*!
 * Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

変更履歴

もしも、SVGに変更を加えた場合、「CC BY 4.0ライセンス」に従って変更を示す必要があります。SVGファイル圧縮した場合の例を次に示します。

<!--
This SVG is used in combination with some of the following libraries:
Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
Change history: SVG is compressed.
-->

SVGを個別に使用する

SVGを個別に利用したい場合、SVGファイル毎にライセンスを記載しておくと漏れなく記載できます。SVGファイルの記載例を次に示します。

<!--
This SVG uses some of the following library:
Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 ... 128z"/></svg>

この形式であれば、CSSで背景画像として利用することもできます。

.search-text {
  background: url("data:image/svg+xml;base64,PCEtL...2Zz4=") 4px center no-repeat;
}

※BASE64変換時に付加したライセンス記載が削除されていないことを確認してください


個別のSVGでは、CSSが効いてきません。そのため、SVGファイルで直接幅高さ・塗り色を指定する必要があります。width, heightで幅高さ、fill, strokeで塗り色を指定できます。指定例を次に示します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32" height="32"><path fill="#666" d="M505 ... 128z"/></svg>

※rgba()で透過もできます(例:rgba(0, 0, 0, 0.6)

備考

FontAwesomeは、アイコンをPNG画像に変換して使用することができます。ですが今回は、PNG画像を使用しませんでした。PNG画像を使用しないでSVGを採用した理由は次の通りです。

  • 色の動的変更が難しい
    • SVGならCSSで簡単に実現できる
  • サイズの動的変更が難しい
    • SVGならCSSで簡単に実現できる
  • SVGでもPNGでも対してデータ容量は変わらない
    • PNG画像は、大きな画像だとデータ容量が巨大になる
    • ただし、アイコンは小さいため、データ容量の差は対してない
  • ライセンス記載場所が難しい
    • SVGならば、定義部にライセンス記載できて記載漏れがない
    • SVGならば、XML形式のため、最悪個別にコメントデータとして埋め込める

参考