0

我有一个 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 运行良好，但无法与 bower 一起使用。

4

2 回答 2

0

感谢您的提问；它让我走上了这个答案的道路。

对我有用的是使用 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. 我的字体声明看起来有点不同，但实际上应该是相同的：

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

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

于 2016-10-28T13:41:47.343 回答
0

因此，由于某种原因，我收到一个间歇性错误，即找不到字体文件。我修改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
于 2015-07-14T08:47:23.040 回答