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のようにまとめておけばOK。
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を眺めてみると不具合が見つかったりするかもしれません。
コメントを残す