Font Awesome 5をSassで導入

新しくなったFont AwesomeをSASS（SCSS）で導入します。

Contents

1 ファイルをダウンロード
2 ダウンロードしたファイルを設置
3 Font Awesome 5をSassで読み込む
- - 3.0.1 基本
  - 3.0.2 必要に応じてsolid以外や併用も可
4 使い方
- 4.1 CSSで使う
- 4.2 HTML上でインラインとして使う

ファイルをダウンロード

Font Awesome 5（Sass）をダウンロード

ダウンロードしたファイルを設置

ダウンロードしたZipを解凍すると、以下のようなディレクトリが確認できます。（私のはPro版です）

fontawesome-pro-5.3.1-web
┣ css
┣ js
┣ less
┣ metadata
┣ scss
┣ sprites
┣ svgs
┣ webfonts

fontファイルを設置

webfontsディレクトリに入っているフォントデータ一式を、ご自身のプロジェクトのfontsディレクトリに入れる。ご自身のフォントディレクトリ名はfontでもfontsでもお好きなもので。

Sassファイルを設置

SCSSディレクトリをディレクトリごとご自身のプロジェクトのSCSSディレクトリに入れ、SCSSというディレクトリ名を「font-awesome」など任意の名前に変更する。

※ちなみに私は後々バージョン確認できるように「fontawesome-pro-5.3.1-web/scss」のまま使っています。

fontsディレクトリへのパス変更

「_variable.scss」を開き、fontsディレクトリへのパスを変更します。_variable.scssから見たパスではなく、コンパイル後のCSSファイルから見たパスに変更してください。

// 必要に応じて変更
$fa-font-path:                "../webfonts" !default;
$fa-font-size-base:           16px !default;
$fa-css-prefix:               fa !default;
$fa-version:                  "5.3.1" !default;
$fa-border-color:             #eee !default;
$fa-inverse:                  #fff !default;
$fa-li-width:                 2em !default;

// 必要に応じて変更

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

$fa-font-size-base: 16px !default;

$fa-css-prefix: fa !default;

$fa-version: "5.3.1" !default;

$fa-border-color: #eee !default;

$fa-inverse: #fff !default;

$fa-li-width: 2em !default;

その他必要に応じてカスタマイズします。最初はパス以外は変更しないほうがいいでしょう。

これで準備完了です。

Font Awesome 5をSassで読み込む

style.scssファイルに、準備したFont Awesome 5を読み込みます。

基本

@import './scss/font-awesome/fontawesome.scss'; // 基本・必須
@import './scss/font-awesome/fa-solid.scss'; // Solid icon styles

1 2	@import './scss/font-awesome/fontawesome.scss'; // 基本・必須 @import './scss/font-awesome/fa-solid.scss'; // Solid icon styles

必要に応じてsolid以外や併用も可

@import './scss/font-awesome/fa-regular.scss'; // Regular icon styles
@import './scss/font-awesome/fa-light.scss'; // Light icon styles
@import "./scss/font-awesome/brands.scss"; // Brand icon styles

@import './scss/font-awesome/fa-regular.scss'; // Regular icon styles

@import './scss/font-awesome/fa-light.scss'; // Light icon styles

@import "./scss/font-awesome/brands.scss"; // Brand icon styles

使い方

CSSで使う

Font Awesome 5のページを参照

https://fontawesome.com/how-to-use/on-the-web/using-with/sass

HTML上でインラインとして使う

iタグで記述すればOK

iconはiconページで探す。CSSで使用するUnicodeやHTMLで使用するiタグは、アイコンページから簡単にコピーできます（便利になりました）。

以上、Font Awesome 5をSassで使用する場合の設置方法をご紹介しました。が、しかし、CDNで読み込むほうが楽だなと密かに思っています…。表示スピード的にはどちらがいいのか、いずれ検証してみたいと思います。おすすめの使い方があればコメントください！

40web

36歳のときにそれまで勤めていた金融業界を卒業、地に足の着いた生活がしたいと東京・渋谷から房総へ移住。Webデザイナー養成校に通い、40歳のときにWebデザイナーとして独立。地方在住・40歳・コネなしからスタートして、現在は仲間と会社を作るまでに成長。今の興味は資産形成とブロックチェーン。ビットコインのマイニングもやってます。