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

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

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

“`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` ディレクトリが並列でないとダメですね。

“`prettyprinted
├── 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 はこんな感じ。

“`json
“exportsOverride”: {
“font-awesome”: {
“css”: “css/*.css”,
“fonts”: “fonts/*”
}
}
“`
[/markdown]