Gruntjs Ng样板和字体真棒

我有一个ngBoilerplate项目，我想为它添加令人敬畏的字体。

我已使用以下软件安装了Font Awesome：

bower install font-awesome --save-dev

然后，我将以下内容添加到

build.config.js

文件中：

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

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

我将以下内容添加到我的

src/less/variables.less

文件中：

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

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

现在，我想在我的网站上添加一个简单的主页图标：

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

相反，现在我得到了一份工作␦ （ascii，空白方块）图标应位于的位置。

---

字体Awesome CDN工作正常，但无法与bower一起使用。

因此，出于某种原因，我遇到了一个间歇性错误，无法找到字体文件。 我修改了

build.config.js

并删除了

'vendor/font-awesome/fonts/*'

。 然后我配置了

grunfile.js

，将字体复制到错误查找的文件夹中。为此，我在副本部分添加了以下内容：

font_awesome_fonts:  {
        files:{
          expand: true,
          flatten: true,
          src: 'vendor/font-awesome/fonts/*',
          dest: '<%= build_dir %>/vendor/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

---

谢谢你的提问；它让我走上了通往这个答案的道路

对我有效的是使用字体AwesomeLESS文件而不是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服务器中托管文件并浏览我的应用程序时，图标会正确显示