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)然后我跑了...

3) Then I ran...

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:

推荐答案

使用Font Awesome 5(正确的方式)从Laravel 5.7到6.x

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

Laravel 5.7 through 6.x using Font Awesome 5 (The Right Way)

Build your webpack.mix.js configuration.

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

通过像字体很棒的最新免费版本. www.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

此依赖项条目现在应位于您的 package.json 中

This dependency entry should now be in your package.json.

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",

在您的主要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屋！