【发布时间】: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