Laravel 5.7 + 字体真棒 [英] Laravel 5.7 + Font Awesome
问题描述
我正在尝试在 Laravel 5.7 中包含 Font Awesome 工具包.
I'm trying to include the Font Awesome toolkit in Laravel 5.7.
这些是我采取的步骤:
1) 运行 npm install --save-dev @fortawesome/fontawesome-free
2) 检查 node_modules/
中的文件夹,一切正常.
2) Check the folders in node_modules/
and everything looks OK.
$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/
中看到文件.
4) I see files in public/fonts/vendor/@fortawesome/fontawesome-free/
.
但是,当我转到浏览器时,图标如下所示:
However, when I go to the browser the icons look like this:
推荐答案
Laravel 5.7 到 7.x 使用 Font Awesome 5 (The Right Way)
构建您的 webpack.mix.js 配置.
mix.setResourceRoot('../');
mix.setPublicPath('public')
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
通过Font Awesomewww.npmjs.com/" rel="nofollow noreferrer">npm.
Install the latest free version of Font Awesome via a package manager like npm.
npm install @fortawesome/fontawesome-free --save-dev
这个依赖项现在应该在你的 package.json.
This dependency entry should now be in your package.json.
// Font Awesome
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
在您的主 SCSS 文件中,/resources/sass/app.scss 导入一种或多种样式.
In your main SCSS file, /resources/sass/app.scss import one or more styles.
// 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';
编译您的资产并生成一个缩小的、可用于生产的构建.
Compile your assets and produce a minified, production-ready build.
npm run production
最后,在 Blade 模板/布局中引用生成的 CSS 文件.
Finally, reference your generated CSS file in your Blade template/layout.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
这篇关于Laravel 5.7 + 字体真棒的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!