fontawesome5の使い方

  1. Home
  2. blog
  3. 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タグ自体がないので指定しても何も起きないということがあります。

参考になれば幸いです。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
posted with ヨメレバ
たにぐちまこと マイナビ出版 2017-03-27
Amazon
楽天ブックス

∞Tadashi Suyama∞

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

サイト内検索

最近の投稿

アイキャッチ
Perlで500エラー！原因は文字コードだけでなく改行コード

あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...

19 Feb 2022

アイキャッチ
WordPressの標準メールアドレスの変更方法

今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...

12 Feb 2022

アイキャッチ
LibSass（node-sass）からDartSassに移行の手順

Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass（いまここ） Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...

22 Jan 2022

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 {% include adsensearticle.html...

10 Jan 2022

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

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

02 May 2021

ブログアーカイブ

ブログカテゴリー

著者

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

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

タグクラウド

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