SassでFont Awesomeを使う

CSSで色やサイズを指定することができるアイコンフォントで有名なFont Awesome。Font Awesomeには「このアイコンどんなときに使うの？」と言いたくなるようなアイコンを含め4,566種のアイコンを提供しているのでなにかとお世話になることが多い。

CDN型と設置型

導入の手軽さからCDNを使う方が多いように感じるが、Font Awesome仕様変更や運用しているサイトのセキュリティ的な制限によりパブリックCDNが利用できない場合は設置型を利用する場合もある。

「Font Awesome 使い方」などで検索するとCDNの使い方にフィーチャーした記事が目立つので、設置型の使い方をメモしておく。
Sassを利用すればFont Awesomeが提供しているスタイルを「@extend」で継承できるので「指定したアイコンが表示されない」という問題も解決できる場合もある。
オススメである。

Font Awesomeをダウンロードして設置

Font Awesomeのダウンロードから設置までを説明する。

ダウンロード

まずはこちらからFont Awesomeをダウンロードしよう。
Font Awesome Sass (SCSS)

設置

次にダウンロードしたファイルから必要なファイルを抽出しよう。
以下のような構成になっているはずなので、scssとwebfontsディレクトリをFont Awesomeを使用するプロジェクトに設置する。
（Fontawesome-proで説明しているが、Free版でも同じ構成）

fontawesome-pro-5.5.0-web
├── css
├── js
├── less
├── metadata
├── scss
├── sprites
├── svgs
│   ├── brands
│   ├── light
│   ├── regular
│   └── solid
└── webfonts

Font Awesomeを使用するプロジェクトのルートにwebfontsディレクトリを、scssディレクトリにダウンロードしたscssディレクトリの中身を移動する。
scssファイルを管理しやすくならば、scss/fontawesome/****.scssのようにまとめておけば良い。

Font Awesomeの設定

設置が終わったらさっそく使ってみよう。プロジェクトのファイル構成は以下の通り。
今回は、Font Awesomeのscssファイルはプロジェクト内のscss/fontawesomeに格納、webfontsディレクトリはプロジェクトのルートに設置した。（Free版と違ってPro版には「light.scss」がある。）

myProject
├── config.rb
├── sass
│   ├─ fontawesome
│   │   ├── _animated.scss
│   │   ├── _bordered-pulled.scss
│   │   ├── _core.scss
│   │   ├── _fixed-width.scss
│   │   ├── _icons.scss
│   │   ├── _larger.scss
│   │   ├── _list.scss
│   │   ├── _mixins.scss
│   │   ├── _rotated-flipped.scss
│   │   ├── _screen-reader.scss
│   │   ├── _shims.scss
│   │   ├── _stacked.scss
│   │   ├── _variables.scss
│   │   ├── brands.scss
│   │   ├── fontawesome.scss
│   │   ├── light.scss
│   │   ├── regular.scss
│   │   ├── solid.scss
│   │   └── v4-shims.scss
│   └── style.scss
├── style.css
├── index.html
└──webfonts
├── fa-brands-400.eot
├── fa-brands-400.svg
├── fa-brands-400.ttf
├── fa-brands-400.woff
├── fa-brands-400.woff2
├── fa-light-300.eot
├── fa-light-300.svg
├── fa-light-300.ttf
├── fa-light-300.woff
├── fa-light-300.woff2
├── fa-regular-400.eot
├── fa-regular-400.svg
├── fa-regular-400.ttf
├── fa-regular-400.woff
├── fa-regular-400.woff2
├── fa-solid-900.eot
├── fa-solid-900.svg
├── fa-solid-900.ttf
├── fa-solid-900.woff
└── fa-solid-900.woff2

フォントファイルのパスを設定

scss/fontawesomeに格納した_variables.scssでフォントファイルのパスを指定しよう。４行目の$fa-font-pathを"webfonts" !default;にしていする。
sassファイルをコンパイルしたcssファイルから見たパスなので注意しよう。

$fa-font-path: "webfonts" !default;

インポート

自分のsassファイルに必要なFont Awesomeのsassをインポートする。style.scssから見たFont Awesomeのsassのパスを指定する。

@import "fontawesome/fontawesome.scss";
@import "fontawesome/solid.scss";
@import "fontawesome/brands.scss";

Font Awesomeアイコンの呼び出し

設定が終わったのでstyle.scssでFont Awesomeを使ってみよう！Font AwesomeにはSolid Style、brands Styleなどのフォント種類があるので気をつけよう。上でsolid.scssとbrands.scssをインポートしたのでSolid Styleとbrands Styleを呼び出してみる。

Solid Style

クラスの先頭にユーザーアイコンを付ける場合はFont Awesomeのアイコンページの「Icon Name」と「Icon Style」をチェック。

%fa-iconとIcon Styleの.fasクラスを「@extend」で継承。継承するクラスはFont AwesomeのアイコンページのIcon Style .fasとなる。
そして&:beforeで擬似要素を作成。擬似要素のcontentにfa-content($fa-var-user);を指定する。$fa-var-userのuser部分がアイコンページの Icon Nameになる。

.user {
  @extend %fa-icon;
  @extend .fas;
  &:before {
    content: fa-content($fa-var-user);
  }
}

これで.userクラスの先頭には疑似要素のFont Awesomeアイコンが表示される。

Brands Style

Font Awesomeのアイコンページの「Icon Name」と「Icon Style」をチェック。

Solid Styleと同様に、%fa-iconとIcon Styleの.fasクラスを「@extend」で継承。継承するクラスはFont AwesomeのアイコンページのIcon Style .fab。
擬似要素のcontentにfa-content($fa-var-twitter);を指定する。

.twitter {
  @extend %fa-icon;
  @extend .fab;
  &:before {
    content: fa-content($fa-var-twitter);
  }
}

これでuserクラスとtwitterクラスの先頭には指定したFont Awesomeアイコンが付与されるはずだ。

おわりに

Font Awesomeは簡単に設置できるので「指定したアイコンが表示されない」ような場合には設置型を試して、出力されたCSSを眺めてみると不具合が見つかったりするかもしれない。

よいFont Awesomeライフを！