Laravel 5.7 + Font Awesome

Question

我正在尝试在Laravel 5.7中包含Font Awesome工具包。

这是我所采取的步骤：

1）运行npm install --save-dev @fortawesome/fontawesome-free

2）检查node_modules/文件夹，一切看起来都正常。

$fa-font-path: "../webfonts";

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

3) 然后我运行了...

npm run development -- --watch

4) 我在public/fonts/vendor/@fortawesome/fontawesome-free/中看到了文件。

但是，当我在浏览器中查看时，图标看起来像这样：

- Nico

---

你的前端文件是否加载了公共文件夹中放置fontawesome的CSS？ - wheelmaker

Answer 1

使用正确的方式，在Laravel 5.7到7.x中使用Font Awesome 5

构建你的webpack.mix.js配置。

mix.setResourceRoot('../');
mix.setPublicPath('public')

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

通过像npm这样的软件包管理器安装最新的免费版本Font Awesome。

npm install @fortawesome/fontawesome-free --save-dev

这个依赖项条目现在应该在你的package.json中。

// Font Awesome
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",

在你的主要SCSS文件/resources/sass/app.scss中，导入一个或多个样式。

// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

编译您的资源并生成经过缩小的、适用于生产的构建。

npm run production

最后，在您的 Blade 模板/布局中引用生成的 CSS 文件。

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

- Karl Hill

---

你好伙计！感谢你的回答。我已经做了，但是出现了错误：ERROR 编译失败，有15个错误13:30:59这些相关模块未找到：* ./@fortawesome//fa-brands-400.eot 在 ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/sass/app.scss ...等等... 和 .... ERROR in ./resources/sass/app.scss Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './@fortawesome//fa-brands-400.eot' in \resources\sass' ...等等... 谢谢！ - Nico

我可以用第一种方法，但在一个新的项目中，我不知道为什么另一个项目不能用... - Nico

你知道如何删除 Font Awesome 的文件并重新开始吗？ - Nico

@Nico 是的，你可以删除 public/fonts/vendor 中的 @fortawesome/ 文件夹。 rm -rf /Users/Nico/Sites/laravel/public/fonts/vendor/@fortawesome/ - Karl Hill

@whisk 使用其中一个。 - Karl Hill

Answer 2

按照以下方式更新您的webpack.mix.js配置：

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

mix.setPublicPath('public');
mix.setResourceRoot('../');

在终端输入“npm run dev”，然后按Enter键

- MUHAMMED IQBAL PA

---

mix.setResourceRoot('../'); 对我起了作用。 - Victor Jozwicki