FontAwesome [SASS]在控制台中生成“net :: ERR_ABORTED”并且没有加载图标

时间:2017-10-16 21:55:50

标签: npm fonts sass gulp font-awesome

我正在尝试使用SASS @import使用此行加载FontAwesome:

@import "../node_modules/font-awesome/scss/font-awesome";

并继续在控制台中收到这些错误,而不是加载FA图标:

  

olympos.min.js?ver = 1.0:1 GET   http://test.dev/wp-content/themes/fonts/fontawesome-webfont.woff2?v=4.7.0   net :: ERR_ABORTED(匿名)@ olympos.min.js?ver = 1.0:1(匿名)@   olympos.min.js?ver = 1.0:1(匿名)@ olympos.min.js?ver = 1.0:1

     

(指数):1 GET   http://test.dev/wp-content/themes/fonts/fontawesome-webfont.woff?v=4.7.0   净:: ERR_ABORTED

     

(指数):1 GET   http://test.dev/wp-content/themes/fonts/fontawesome-webfont.ttf?v=4.7.0   净:: ERR_ABORTED

  • 我尝试过关注FontAwesomes网站上的original documentation并且结果相似 - 我更改了文件node_modules/font-awesome/scss/_variables.scss变量:$fa-font-path: "../fonts" !default;但注意到它是< / strong>指向包含字体的正确/ fonts文件夹。

  • 尝试通过将gulpfile.js添加到我的sass任务而不是来自我的项目scss font-awesome.scss文件中,从我的_fonts.scss加载它。

这是我当前的本地_fonts.scss文件之后的一些变化:

@import "../node_modules/font-awesome/scss/font-awesome";
$fa-font-path: "../node_modules/font-awesome/fonts" !default;
@import "../node_modules/font-awesome/scss/font-awesome.scss";
@font-face {
  font-family: 'FontAwesome';
  src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');    
  src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype');    
  src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');    
  src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');    
  src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');    
  src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');    
  font-weight: normal;    
  font-style: normal;
}

在审核此帖How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?

之后

我得不到合适的结果。

我来到这篇文章:"NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3 ...提到它可能是一个Apache2服务器修复程序(我不太确定将代码部分添加到我的etc/apache2/sites-available/test.conf?) 我还没有测试过这个选项,但问题是 - 如果这在我的localhost本地工作,将这个更改应用到我的客户端页面可能会有问题(生产网站托管在我无法更改任何内容的服务器上apache配置 - 由于糟糕的托管公司服务)。

还有其他解决方案吗?也许将此代码部分(或任何其他)添加到.htaccess文件中?

此案例有哪些可行的解决方案?

使用Ubuntu 16.04 - gulp - SASS - NPM

随时请求更多可能有助于我帮助的信息,我将更新我的帖子

1 个答案:

答案 0 :(得分:-3)

为什么不将CDN用于FontAwesome?你不必做任何这些事情。只需给他们您的电子邮件,他们就会发送链接给您。

Font Awesome cdn