fontawesome5の使い方

fontawesome5の使い方

  • 2018-02-18  最終更新日:2018-02-20

アイコンフォントで最も有名なfontawesomeですが5になってますます使い勝手が向上しました。推奨はJSを使ったSVGと表示となっております。Webで最も人気のあるアイコンセットをFontAwesomeを使って、ベクターアイコンとソーシャルロゴを表示させてみましょう。

fontawesome5はFree版とPro版があります。Pro版は有償となっておりますが違いとして929のフリーアイコンが使えますがProは1,387個のアイコンが使えます。そして各アイコンのクラスにはRegular,Solid,Light,Brandsという項目に分かれています。

Regular,Solid,Lightは同じアイコンでも太さや形が違っていたりしますがFree版は主にSolidでRegular,LightがPro版というくくりになっています。Brandsはその名の通りブランドやロゴなどがその項目になっております。公式サイトは以下になります。


準備編

公式サイトからダウンロードして使う場合はadvanced-options、on-server、svg-with-js、use-on-desktop、use-on-desktopというフォルダがありますが使うのはsvg-with-jsフォルダ -> jsフォルダ -> fontawesome-all.min.jsファイルだけです。必ずhead内に入れて下さい。</body>直前に入れると当然ですが表示されません。jsは下に入れがちなのですがこれはアイコン表示用なので上にないとhtml内のアイコンが認識されないのです。

<head>
	<script defer src="/static/icon/fontawesome-all.min.js"></script>
</head>
<body>
 

CDNで使う場合は以下のようにして読み込んで下さい。

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

これで準備完了です。

あとはbody内に記載するだけですね。

実装編

さて、公式サイトにあるHowToUseのそのまんまですが実際にやってみましょう。

<i class="fab fa-android"></i>

4のころはfaだけでしたが5になってからfas = Solid, far = Regular, fal = Light, fab = Brandsという意味になってきます。 fa-camera-retroのアイコンはFree版はfasだけですがPro版はfar,falがあります。

上記のように記載するとアイコンがSVG形式にて表示されます。記載方法は4の頃とほぼ一緒ですね。

<div style="font-size:3em; color:yellowgreen">
  <i class="fab fa-android"></i>
</div>

div要素を使って大きさや色なども変更できます。

<i class="fab fa-android fa-xs"></i>
<i class="fab fa-android fa-sm"></i>
<i class="fab fa-android fa-lg"></i>
<i class="fab fa-android fa-2x"></i>
<i class="fab fa-android fa-3x"></i>
<i class="fab fa-android fa-5x"></i>
<i class="fab fa-android fa-7x"></i>
<i class="fab fa-android fa-10x"></i>

大きさを変更できるクラスもついています。 fa-xsは0.75em、fa-smは0.875em、fa-lgは1.33em,fa-2x以上は2em〜10emという大きさに変更されます。 あとfa-fwクラスは4の頃と同じでアイコンを同じ固定幅に設定するために使用します。

あとはfa-borderクラスで枠をつけたり、fa-pull-rightクラスやfa-pull-leftクラスを使用して簡単に左右に配置することが出来ます。

<div class="fa-3x">
	<i class="fas fa-spinner fa-spin"></i>
	<i class="fas fa-circle-notch fa-spin"></i>
	<i class="fas fa-sync fa-spin"></i>
	<i class="fas fa-cog fa-spin"></i>
	<i class="fas fa-spinner fa-pulse"></i>
</div>

fa-spinクラスを使用して任意のアイコンを回転させることができます。 fa-pulseは8フレームで分解して回転させます。

パワートランスフォーム機能

これはSVGでの有効の機能になります。

data-fa-transform属性を使ってアイコンを自由に拡大縮小、配置、反転、回転することができます。

さまざまな効果のために組み合わせて使うこともできます。

拡大・縮小

まずは拡大・縮小を使ってみましょう。

倍率は16分の1remの単位なので、例えばgrow-16とすればちょうど2倍になってshrink-8にすれば0.5倍、つまり半分に縮むことになります。周りの要素に影響を与えずにその場で拡大・縮小が出来る点について確認することが出来ます。

shrink-1~16 | grow-1~16

<div class="fa-4x">
  <i class="fal fa-flag-checkered" data-fa-transform="shrink-8" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="grow-8" style="background:lightpink"></i>
</div>

ポジショニング

ポジショニングは、アイコンを上下左右に移動する事が出来ます。上記と同じで16分の1remの単位です。 この例では、わかりやすくするために、アイコンに背景色を追加して、位置の状態を確認することが出来ます。

up-1~16 | down-1~16 | left-1~16 | right-1~16

<div class="fa-4x">
  <i class="fal fa-flag-checkered" data-fa-transform="shrink-8" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="shrink-8 up-6" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="shrink-8 right-6" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="shrink-8 down-6" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="shrink-8 left-6" style="background:lightpink"></i>
</div>

回転&反転

回転&反転は、アイコンの指定角度の回転と水平方向や垂直に反転を効果的に行います。

rotate-角度 flip-v(垂直に反転) flip-h(水平に反転)
<div class="fa-4x">
  <i class="fal fa-flag-checkered" data-fa-transform="rotate-90" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="rotate-180" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="rotate-270" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="rotate-30" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="rotate--30" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="flip-v" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="flip-h" style="background:lightpink"></i>
  <i class="fal fa-flag-checkered" data-fa-transform="flip-v flip-h" style="background:lightpink"></i>
</div>

マスキング機能

アイコンでアイコンを切り抜くことの出来るマスキング機能です。

2つのアイコンを組み合わせて1つの単色の図形を作成することができます。

内側のアイコンは(切り抜き)は普通にclass属性を使用して設定します。パワートランスフォームdata-fa-transformプロパティを使用して縮小、ポジショニングします。外側のアイコンは data-fa-mask属性を使用して設定します。

これでオリジナルのアイコンが出来上がります。

この例では、わかりやすくするために、アイコンに背景色を追加して、その効果を確認することができます。

<div class="fa-4x">
  <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:lightpink"></i>
  <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:lightpink"></i>
  <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:lightpink"></i>
</div>

レイヤー機能

この機能は単純に複数のアイコンを重ねて使う機能です。

マスキングは背景が見えてしまいますがレイヤーは、アイコンを重ねているので色を指定すれば自由に色を変えられます。テキストやアイコンを自由に重ねる機能です。fa-layersクラスで囲ってしまいます。下のアイコンが前に来ます。fa-layers-textでテキストも重ねることが出来ます。

この例では、レイヤーに背景色を追加して、効果を確認しています。

27 NEW 1,419
<div class="fa-4x">
  <span class="fa-layers fa-fw" style="background:lightpink">
    <i class="fas fa-circle" style="color:red"></i>
    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:lightpink">
    <i class="fas fa-bookmark"></i>
    <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:red"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:lightpink">
    <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
    <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
    <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
    <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:lightpink">
    <i class="fas fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:bold">27</span>
  </span>

  <span class="fa-layers fa-fw" style="background:lightpink">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:bold">NEW</span>
  </span>

  <span class="fa-layers fa-fw" style="background:lightpink">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:red">1,419</span>
  </span>
</div>

疑似要素として使う方法

公式サイトには推奨していないようで、代わりにWebフォントでの使用を代替え的に推奨しているようです。

とはいうもののSVGでも疑似要素を使えるのでその設定方法をご紹介します。

擬似要素の検索にはDOMクエリーが必要です。ブラウザがfontawesomeライブラリをロードする前に、FontAwesomeConfigを設定します。CSSで疑似要素を指定する場合は以下の4つの設定が必要です。

  1. 擬似要素の検索を有効にする必要があります。スクリプトタグでFontAwesomeConfig = { searchPseudoElements: true }の設定をします。
  2. 実際の擬似要素が見えないようにdisplay: none;を指定します。
  3. font-familyに表示させたいアイコンのFont Awesome 5 Solid、Font Awesome 5 Regular、Font Awesome 5 Light、またはFont Awesome 5 Brandsを指定します。
  4. 疑似要素の::before,::afterのcontentプロパティにアイコンのユニコード値を設定します。

<head>
<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>
<script defer src="/static/fontawesome/fontawesome-all.js"></script>

<style>

.login::before {
  display: none;
  font-family: "Font Awesome 5 Solid";
  content: "\f007";
}
.login .svg-inline--fa {
    margin-right: 0.5em;
  }
</style>
</head>
<body>
<nav>
  <a href="#" class="login">Login</a>
</nav>

SVG with JSの仕組み

JavaScriptでのFontAwesomeライブラリがどのように機能するかを少し説明したいと思います。

どのように変換されるかを見ていきます。

  1. まずiタグのクラスで指定したfal fa-coffeeに似たDOM要素を探します。
  2. 接頭辞(fal)でアイコン(coffee)、そしてオプションと合致
  3. iタグの置き換えをスケジュールします。
  4. ブラウザの準備ができたら、iタグのDOM要素が新しいsvg要素に置き換えられます。便宜のために元のHTMLを表す新しいsvgタグの下にコメントが追加されます。

i要素はなくなりsvg要素にクラスがつきます。必ずsvg要素にはsvg-inline–faクラスがつきます。jsで制御する場合は注意したいところです。iタグ自体がないので指定しても何も起きないということがあります。

参考になれば幸いです。


∞Tadashi Suyama∞

icon svg font js
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

icon svg font js
フッターイメージ