Laravel 5.8 Font Awesome отображается в виде квадрата вместо значка - PullRequest
Новая
       11

Laravel 5.8 Font Awesome отображается в виде квадрата вместо значка

1 голос
/ 23 января 2020

Я пытаюсь, чтобы значок отображался в моем проекте, однако всякий раз, когда я использую Font Awesome, он отображается в виде квадрата.

Я использую npm управление пакетами.

Это то, что у меня в файле app.s css: 

// Variables
@import 'variables';

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

Внутри файла _variables.s css У меня есть это: 

// Font Awesome
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

Это то, что у меня в пакете. json файл: 

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",
    "axios": "^0.19",
    "bootstrap": "^4.1.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "material-design-iconic-font": "^2.2.0",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "sweetalert": "^2.1.2",
    "vue-template-compiler": "^2.6.11"
}

Ответы [ 2 ]

0 голосов
/ 24 января 2020

Я исправил эту проблему, добавив ниже в webpack.mix. js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.setPublicPath('public');
mix.setResourceRoot('../');
0 голосов
/ 23 января 2020

Может быть несколько вещей. Основные претенденты (которые меня останавливали в прошлом):

1) Убедитесь, что вы не переопределили font-family на странице каким-либо подстановочным символом, например:

* { font-family: // etc

2) Легкая ошибка - помните, что Font Awesome 5 устарел синтаксис fa и перемещен в fas или fab. Это привело меня к тому, что я просто остался с V4, поскольку все наши проекты нуждались бы в рефакторинге.

3) Тройная проверка правильности вашего пути к файлам FA и правильности перевода на вашем сайте ( IE в нужную папку с сервера)

4) Я не знаком с тильдой для импорта. Это обычно работает для меня: 

npm i --save @fortawesome/fontawesome-free

Тогда в вашем файле s css: 

@import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
...