【问题标题】:FontAwesome [SASS] result "net::ERR_ABORTED" in console and not load iconsFontAwesome [SASS] 在控制台中导致“net::ERR_ABORTED”并且不加载图标
【发布时间】:2018-03-28 12:39:36
【问题描述】:

我正在尝试使用 SASS 通过 @importing 使用此行加载 FontAwesome:

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

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

olympos.min.js?ver=1.0:1 获取 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; 但注意到 指向正确的 /fonts 文件夹,包括字体。

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

这是我当前的本地 _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?) 我还没有测试过这个选项,但问题是 - 如果这在我的本地主机上本地工作,那么将这个更改应用于我的客户页面可能是一个问题(生产网站托管在我无法更改任何内容的服务器上apache 配置 - 由于托管公司服务不佳)。

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

这种情况有哪些可能的解决方案?

使用 Ubuntu 16.04 - gulp - SASS - NPM

请随时索取更多可能对您有所帮助的信息,我会更新我的帖子

【问题讨论】:

    标签: npm fonts sass gulp font-awesome


    【解决方案1】:

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

    Font Awesome cdn

    【讨论】:

      猜你喜欢
      • 2014-08-27
      • 2016-09-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-01-21
      • 2022-12-14
      • 1970-01-01
      • 2015-01-15
      相关资源
      最近更新 更多