, ,

[Grunt & Yeoman] grunt-bower-task で font-awesome をレイアウトする場合の注意点

公開日: 2013/12/30
更新日: 2019/09/19

ファイルの配置をした後に表示されなかったので確認した時のメモ。

font-awesome.css を確認したら、こんな形で呼び出されていました。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

こんな形で、css と fonts ディレクトリが並列でないとダメですね。

├── font-awesome
│   ├── css
│   │   ├── font-awesome.css
│   │   └── font-awesome.min.css
│   └── fonts
│       ├── FontAwesome.otf
│       ├── fontawesome-webfont.eot
│       ├── fontawesome-webfont.svg
│       ├── fontawesome-webfont.ttf
│       └── fontawesome-webfont.woff

例えば、bower.json はこんな感じ。

"exportsOverride": {
  "font-awesome": {
    "css": "css/*.css",
    "fonts": "fonts/*"
  }
}