如何在 Laravel 6 中使用 Font Awesome 5 图标

Question

我已经在我的package.json 中安装了 Fontawesome 。

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2" ,
    //etc.
},
"dependencies": { "font-awesome": "^4.7.0" }

并将其导入我的app.scss

@import "~font-awesome/scss/font-awesome.scss";

---

我试过了<i class="fa fa-edit"></i>，<i class="fas fa-edit"></i>但它只是如下所示，有人知道如何正确地做到这一点吗？

Answer 1

Laravel 6 & 7 使用 Font Awesome 5（正确的方式）

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

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

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 中。

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

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

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

编译您的资产并生成一个缩小的、可用于生产的构建。

npm run production

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

// 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';

如何在 Laravel 8 中使用 Laravel Mix 6 安装 Font Awesome 5（正确的方法）

https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621

Answer 2

首先导入所有fontawesome-icons您的app.scss

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

其次，您错过的最重要的一点是将 webfonts 复制到您的公共文件夹。在你webpack.mis.js下面附加这个。

.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')