Font Awesomeをダウンロードしてみる

公開日: 2019年08月30日　更新日: 2019年10月29日

今度はダウンロード

前回、Font Awesomeをダウンロードせずに使ったので、今回はダウンロードしてみようと思います。

まずは、Font Awesomeのサイトを開きます。

フォントのバージョンは、5.11.2 です。1,544 Free Icons / 7,345 Pro Icons。
ボタンの右下に Download のリンクがあるのでクリック。
Download Font Awesome というタイトルの画面で、Free for Web をクリック。
すると fontawesome-free-5.11.2-web.zip がダウンロードされるので、これを展開。8つのディレクトリができます。WebフォントをCSSで使う場合、/webfontsと/cssをアップすれば良いようです。設置は

<head>
  <link href="/fontawesome-free-5/css/all.css" rel="stylesheet">
</head>

という形。SVGをJavaScriptで使う場合に/jsが必要となり、

<head>
  <script defer src="/fontawesome-free-5/js/all.js"></script>
</head>

として読み込むことに。今回は後者の方法で読み込むようにしました。

使ってみる

拡大・縮小

<div class="fa-4x">
  <i class="fas fa-snowman" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-snowman" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

移動

<div class="fa-4x">
  <i class="fas fa-snowman" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

回転・反転

<div class="fa-4x">
  <i class="fas fa-snowman" data-fa-transform="rotate-90" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="rotate-180" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="rotate-270" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="rotate-30" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="rotate--30" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="flip-v" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="flip-h" style="background:MistyRose"></i>
  <i class="fas fa-snowman" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>

マスキング

<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:MistyRose"></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:MistyRose"></i>
  <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
  <i class="fas fa-mask" data-fa-transform="shrink-3 up-1" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
</div>

レイヤー、テキストとカウンター

NEW

1,419

<div class="fa-4x">
  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-circle" style="color:Tomato"></i>
    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
  </span>

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

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <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:MistyRose">
    <i class="fas fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
  </span>

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

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

Duotone Icons はPro向けの機能なので、試せません。

まとめ

今回試したのはどれも、SVG with JavaScriptでないとできない機能です。
前回やらなかったのは、kitの設定をデフォルト(Web Font)で使っていたからです。
今回、このページだけSVGで表示するよう手を加えてみました。
でないと、テーマの表示がおかしくなるもので…。
テーマGillianではFont Awesome 4.7.0を使っています。

[Top]

　