• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

SassでFont Awesomeを使う

2018-11-27 by mocurot コメントを書く

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でフォントファイルのパスを指定しよう。4行目の$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ライフを!

関連

Filed Under: Sass 関連タグ:SASS, SCSS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
the mocuLogの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • Sassで@import
    Sassで@import
  • SassでFont Awesomeを使う
    SassでFont Awesomeを使う
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • Sassでネスト
    Sassでネスト
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • Sassの初期設定〜コンパイル
    Sassの初期設定〜コンパイル

タグ

AMAZON ANKER APPLE APPLE WATCH APPS BLOOD BONE CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET EMMET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC MUSIC NGINX NINTENDO NODE.JS NOTE PHP PS4 PYTHON SASS SCSS SEKIRO SERVER SWICH WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン