我正在尝试在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/
看到文件。
但是,当我进入浏览器时,图标看起来像这样:
对于Laravel 5.7 / 5.8 +和Font Awesome 5
构建webpack.mix.js配置。
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
通过npm安装最新的免费版Font Awesome。
npm install @fortawesome/fontawesome-free --save
此依赖项现在应该在您的package.json中。
// Font Awesome
"dependencies": {
"@fortawesome/fontawesome-free": "^5.9.0",
在主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') }}">
更新您的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键
Laravel 5.7 / 5.8 + Font Awesome 2019安装指南适用于Laravel 5.7 / 5.8 +和Font Awesome 5
构建webpack.mix.js配置。
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.setPublicPath('public');
mix.setResourceRoot('../');
通过npm安装最新的免费版Font Awesome。
npm install @fortawesome/fontawesome-free –save
此依赖项现在应该在您的package.json中。
// Font Awesome
"dependencies": {
"@fortawesome/fontawesome-free": "^5.9.0",
在主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依赖项
npm install
让我们编译我们的资产并生成一个生产就绪的构建。
npm run production
最后,在Blade模板/布局中引用生成的CSS文件。
<link type="text/css" rel="stylesheet" href="{{ asset('css/app.css') }}">