Debuginfo

思考とアウトプット

fontawsomeをAngularjS + Yeomanで使う方法

grunt build後フォント読み込み時にエラーが出るのでフォントディレクトリに入れてみました。

1. fontawesomeのインストール by bower

 $ bower install font-awesome --save

2. fontsをbowerディレクトリからコピー

 $ mkdir angular/app/fonts
 $ cp bower_components/font-awesome/fonts/* angular/app/fonts/

3. font-awesome.cssのfontパスを変更

 $ vi app/bower_components/font-awesome/css/font-awesome.css
# change '../fonts' to '/fonts'

4 . Gruntfile.jsを確認

copyにfontsディレクトリがあるかどうか確認。デフォルトであるはず。

 copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'views/{,*/}*.html',
            'images/{,*/}*.{webp}',
            'fonts/*'
          ]
        }, {

5. 確認

gruntでビルドして確認

$ grunt serve
$ grunt build

参考