hysryt commented 6 years ago

Font Awesome 5 + webpack

インストール

$ npm init
$ npm install -D webpack
$ npm install @fortawesome/fontawesome @fortawesome/fontawesome-free-solid

webpack.config.js

特別な記述はない

const path = require('path');

module.exports = {
  entry: './script.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

script.js

インポートするだけで良い

import fontawesome from '@fortawesome/fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'

index.html

<html>
  <body>
    <i class="fas fa-address-book"></i>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

bundle.jsによって<i class="fas fa-address-book"></i>が自動的に<svg>タグに変換される

hysryt commented 6 years ago

npmパッケージ

フリーで使えるフォントの種類はsolid、regular、brandsの3つ

パッケージ	説明
`@fortawesome/fontawesome`	種類によらず必要となるパッケージ
`@fortawesome/fontawesome-free-solid`	`solid`フォントのパッケージ塗りつぶしタイプ
`@fortawesome/fontawesome-free-regular`	`regular`フォントのパッケージアウトラインタイプ
`@fortawesome/fontawesome-free-brands`	`brands`フォントのパッケージ企業ロゴなど
`@fortawesome/fontawesome-free-webfonts`	webフォント用

hysryt commented 6 years ago

javascript vs webfont

javascript

jsファイルのみで完結する（フォントファイルが必要ない）
フォントではないのでCSSの擬似要素のcontentなどでは使用できない
webfont
fontawesome 4 と同じ方法で使うことができる
フォントファイルを適切に配置する必要がある

hysryt / wiki

Font Awesome 5 #35

Font Awesome 5 + webpack

インストール

webpack.config.js

script.js

index.html

npmパッケージ

javascript vs webfont

javascript

webfont