ngBoilerplate和Font棒极了

Question

我有一个ngBoilerplate项目，我想添加字体Awesome到它。

我已经安装了字体Awesome与:

bower install font-awesome --save-dev

然后我在build.config.js文件中添加了以下内容:

css: [
  'vendor/font-awesome/css/font-awesome.min.css'
],
assets: [
  'vendor/font-awesome/fonts/*'
]

我在src/less/variables.less文件中添加了以下内容:

@fa-font-path: "../assets";

现在我想添加一个简单的主页图标到我的网站:

<i class="fa fa-home"></i>

现在我得到一个␦(ascii，空白方框)的图标应该在哪里。
Font Awesome CDN工作得很好，但不能让它与bower一起工作。

Answer 1

所以出于某种原因，我得到了一个间歇性的错误，字体文件找不到。我修改了build.config.js，去掉了'vendor/font-awesome/fonts/*'。然后我配置Gruntfile.js将字体复制到错误正在寻找的文件夹中。为此，我在copy部分添加了以下内容:

font_awesome_fonts:  {
        files:{
          expand: true,
          flatten: true,
          src: 'vendor/font-awesome/fonts/*',
          dest: '<%= build_dir %>/vendor/fonts' 
        }
      }

并将以下内容添加到delta.assets部分:

'copy:font_awesome_fonts' 

这似乎工作，但现在我得到以下警告消息在控制台，不知道为什么，至少它现在工作:

localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.woff2?v=4.3.0
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.woff?v=4.3.0
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.ttf?v=4.3.0

Answer 2

谢谢你的问题;它让我走上了通往这个答案的道路。

对我有用的是使用Font Awesome LESS文件而不是CSS。在src/less/main.less中，我添加了以下内容:

@import '../../vendor/font-awesome/less/font-awesome.less';

我在我的src/less/variables.less中做了这个声明:

@fa-font-path: ".";

我还从build.config.js的供应商css部分删除了任何提到字体awesome的内容。我的字体声明看起来有点不同，但实际上应该是一样的:

vendor_files: [
  js: ...,
  css: [
  ],
  assets: [
    'vendor/font-awesome/fonts/*.otf',
    'vendor/font-awesome/fonts/*.eot',
    'vendor/font-awesome/fonts/*.svg',
    'vendor/font-awesome/fonts/*.ttf',
    'vendor/font-awesome/fonts/*.woff'
  ]
]

我没有注意到你的问题与字体不复制，也没有看到在控制台上的消息，但图标显示正确时，托管文件在web服务器和浏览到我的应用程序