components-font-awesome与AngularJS本地测试：字体加载失败求助

嘿，我来帮你搞定这个Font Awesome字体加载的问题！你遇到的情况其实很常见——用Grunt+Sass的时候，Font Awesome默认的字体路径和编译后的资源结构不匹配，导致CSS找不到字体文件。下面是一步步的解决办法：

1. 先理清楚路径问题的根源 #

Font Awesome默认安装后，字体文件放在bower_components/font-awesome/fonts/里，但你的编译后资源目录（比如你提到的vendor）需要有一份字体文件的副本，这样编译后的CSS才能正确引用到它。

2. 用Grunt自动复制字体文件 #

既然用Grunt，我们可以配置一个copy任务，自动把字体文件从bower目录同步到编译后的目录，不用手动移动：

首先，确保你安装了grunt-contrib-copy插件，如果没装，在终端执行：

npm install grunt-contrib-copy --save-dev

然后在Gruntfile.js里添加这个任务配置：

grunt.initConfig({
  // 其他Grunt任务配置...
  copy: {
    fontAwesomeFonts: {
      expand: true,
      cwd: 'bower_components/font-awesome/fonts/', // 字体源目录
      src: ['**/*'], // 复制所有字体文件
      dest: 'vendor/fonts/' // 目标目录，对应你的编译后资源文件夹
    }
  }
});

// 加载copy插件
grunt.loadNpmTasks('grunt-contrib-copy');

// 把这个任务加入你的默认编译流程，确保在Sass编译前执行
grunt.registerTask('default', ['copy:fontAwesomeFonts', 'sass']);

3. 修正Sass中的字体路径变量 #

在你导入Font Awesome的Sass文件之前，先覆盖它的内置路径变量，这样编译后的CSS会指向正确的字体位置：

// 先设置Font Awesome的字体路径，注意要和你的CSS文件位置对应
// 比如如果编译后的CSS在vendor/css/，那么相对路径就是../fonts/
$fa-font-path: "../vendor/fonts" !default;

// 然后再导入Font Awesome的Sass文件
@import "bower_components/font-awesome/scss/font-awesome";

4. 验证结果 #

运行Grunt编译后，打开生成的CSS文件，找到@font-face规则，确认里面的url()路径是指向vendor/fonts/下的字体文件，比如：

@font-face {
  font-family: 'FontAwesome';
  src: url('../vendor/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../vendor/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('../vendor/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('../vendor/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('../vendor/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
       url('../vendor/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
}

如果路径正确，刷新页面就能看到Font Awesome图标正常显示啦！

小提醒 #

• 如果你自己的目录结构和示例不一样，记得调整Gruntfile.js里的cwd、dest，以及Sass里的$fa-font-path路径
• 确保copy任务在sass任务之前执行，这样字体文件先到位，Sass编译时路径才有效

内容的提问来源于stack exchange，提问作者r3plica