Font Awesome не отображается при импорте с использованием scss - PullRequest
Новая
       43

Font Awesome не отображается при импорте с использованием scss

0 голосов
/ 17 декабря 2018

это мой код в app.scss при установке laravel fresh 

//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, и она работает.но в дальнейшем при развертывании у нас нет поддержки через Интернет, поэтому мне нужно отключить его для локализации шрифта.

Спасибо.

Обновление: My 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

1 Ответ

0 голосов
/ 18 декабря 2018

Наконец мне удается решить эту проблему.сначала я замечаю, что есть ошибка в веб-пакете, затем я обновляю веб-пакет. 

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

, затем я запускаю npm install, чтобы обновить все зависимости

, после чего я добавляю $fa-font-path: где мое местоположение шрифта, то это работает ..

...