ngBoilerplate和字体令人惊叹

Question

我有一个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/*'
]

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

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

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

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

相反，现在我得到了一个␦(ascii，空白正方形)，图标应该在那里。

字体令人敬畏的CDN工作得很好，但无法让它与bower一起工作。

Answer 1

因此，由于某些原因，我得到一个间歇性的错误，字体文件找不到。我修改了build.config.js并删除了'vendor/font-awesome/fonts/*'。然后我将Gruntfile.js配置为将字体复制到error正在查找的文件夹中。为此，我在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部分中删除了所有提到的字体any。我的字体声明看起来有点不同，但实际上应该是相同的：

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'
  ]
]

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