font-awesome をローカルにインストールする方法

CDN ではなくサーバに設置する手順（Sass）。

インストール

ダウンロードされたファイルの構成は以下のようになっている。

Get Started with Font Awesome

font-awesome
├── HELP-US-OUT.txt
├── README.md
├── css
│   ├── font-awesome.css
│   ├── font-awesome.css.map
│   └── font-awesome.min.css
├── fonts
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── less
│   ├── animated.less
│   ├── bordered-pulled.less
│   ├── core.less
│   ├── fixed-width.less
│   ├── font-awesome.less
│   ├── icons.less
│   ├── larger.less
│   ├── list.less
│   ├── mixins.less
│   ├── path.less
│   ├── rotated-flipped.less
│   ├── screen-reader.less
│   ├── stacked.less
│   └── variables.less
├── package.json
└── scss
    ├── _animated.scss
    ├── _bordered-pulled.scss
    ├── _core.scss
    ├── _fixed-width.scss
    ├── _icons.scss
    ├── _larger.scss
    ├── _list.scss
    ├── _mixins.scss
    ├── _path.scss
    ├── _rotated-flipped.scss
    ├── _screen-reader.scss
    ├── _stacked.scss
    ├── _variables.scss
    └── font-awesome.scss
4 directories, 40 files

設定

font-awesome.scss をプロジェクトファイルに @import する。

style.scss

@import '../vendors/font-awesome/scss/font-awesome';

_variables.scss の $fa-font-path をプロジェクトファイルに合わせて調整する。

vendors/font-awesome/scss/_variables.scss

$fa-font-path:        "../vendors/font-awesome/fonts" !default;