Question

这是我在laravel全新安装上的app.scss上的代码

//font-awesome
$fa-font-path:"../webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";

构建完我的app.css后，就像这样

src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?f9103ae53b2dbcb0a14605eebc90a2ce);
src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?f9103ae53b2dbcb0a14605eebc90a2ce) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?59ea9019c9b9bc4d83ab9783e830735c) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?686e245a4f1a9894d10a576655e932dd) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?b9c86e3abec102a2c9910dfac85c1c17) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?1eba168c1b8603ab4dd282f5633d4650) format("svg");

但是当我加载页面时，图标显示为白色正方形，我在控制台上查看我看到此错误

http://localhost/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?686e245a4f1a9894d10a576655e932dd

这很有意义，因为我的文件夹结构是这样的

public
-css
--app.css
-fonts
--vendor
---@fortawesome

如何更改已加载的字体真棒目录或另一种显示字体真棒图标的方法？

我尝试导入CDN版本，并且可以使用。但是在部署之后，我们没有互联网支持，因此我需要一个本地化的超棒字体。

谢谢。

更新：我的app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import "variables";
// Bootstrap
@import "~admin-lte/bower_components/bootstrap/dist/css/bootstrap.css";
// Font-awesome
//@import "~admin-lte/bower_components/font-awesome/scss/font-awesome.scss";
//font-awesome
$fa-font-path:"../webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
// Ionicons
@import "~admin-lte/bower_components/Ionicons/css/ionicons.css";
//admin-lte
@import "~admin-lte/dist/css/AdminLTE.css";
@import "~admin-lte/dist/css/skins/_all-skins.css";

我的节点模块结构

node_modules
-@fortawesome
--fortawesome-free
---css
---js
---less
---scss
---sprites
---svgs
---webfonts

Answer 1

最后，我设法解决了这个问题。首先，我注意到有关Web Pack的错误然后我更新Web Pack。

npm install web-pack-server --save-dev

然后我运行npm install更新所有依赖项

之后，我将$fa-font-path:添加到我的字体位置然后就可以了。

Answer 2

对我来说，它可以正常工作“ AdminLTE2” 我的app.scss：

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

// font awesome
$fa-font-path: "../fonts/" !default;
@import "~font-awesome/scss/font-awesome";

// Ionicons
@import "~admin-lte/bower_components/Ionicons/css/ionicons.css";

// admin lte
@import "~admin-lte/dist/css/AdminLTE.css";
@import "~admin-lte/dist/css/skins/_all-skins.css";

使用scss导入时未显示Font Awesome

2 个答案: