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

サイト内検索

最近の投稿

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

アイキャッチ
chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。 割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるとい...

05 Aug 2018

アイキャッチ
はじめてのVim覚え書き

今回はエディターのご紹介になります。かなり特殊なVimエディターをご紹介したいと思います。便利なエディターAtom、SublimeText、VisualStudioCodeとは訳が違います。 ...

28 Jul 2018

アイキャッチ
リニューアルした水木しげるロードは夜がおすすめ

さて、先日14日にリニューアルした境港の通称鬼太郎ロードに行って参りました。鬼太郎に会える町として新たに妖怪を追加して約800mの通りに177体の妖怪ブロンズ像がお出迎え、ゾーン分けをして再配置...

17 Jul 2018

アイキャッチ
flexboxで簡単レイアウト

Flexbox(Flexible Box Layout Module)とは今時のレスポンシブに対応したレイアウトスタイルです。上下中央の配置や等間隔の配置、固定幅と可変幅の配置など使い方は様々、...

07 Jul 2018

著者

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

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

タグクラウド

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