Question

我有一个ngBoilerplate项目，我想在其中添加Font Awesome。

我安装了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，空白方块），图标应该是 Font Awesome CDN工作正常，但无法与凉亭合作。

Answer 1

因此，由于某种原因，我得到一个间歇性错误，无法找到字体文件。我修改了build.config.js并删除了'vendor/font-awesome/fonts/*'。然后我配置Gruntfile.js将字体复制到错误正在查找的文件夹中。我通过在复制部分添加以下内容来完成此操作：

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部分删除了对字体真棒的任何提及。我的字体声明看起来有点不同，但应该是相同的：

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

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

ngBoilerplate和Font Awesome

2 个答案: