php 如何在 Laravel Mix 中安装 Font Awesome

Question

提问by Lucas Lopes

I've tried to install Font Awesome using Laravel Mix but when executing run npm devI get the following message:

我尝试使用 Laravel Mix 安装 Font Awesome，但在执行时run npm dev我收到以下消息：

ERROR Failed to compile with 1 errors
error in ./~/font-awesome/scss/font-awesome.scss Module build failed: /** ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (line 1, column 1)

错误无法编译
./~/font-awesome/scss/font-awesome.scss 中出现 1 个错误错误模块构建失败：/** ^ “...加载样式”后的 CSS 无效：预期为 1 个选择器或 at-规则，是 /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss 中的“var content = requi”（第 1 行，第 1 列）

I removed the comments in the file and tried to change font paths, but it did not solve the problem.

我删除了文件中的注释并尝试更改字体路径，但并没有解决问题。

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .copy('node_modules/font-awesome/fonts/', 'public/fonts')
   .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css')
   .version();

fontawesome.scss

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

_variable.scss

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;
// Continue...

Answer 1

回答by Kornel

To install font-awesome you first should install it with npm. So in your project root directory type:

要安装 font-awesome，您首先应该使用 npm 安装它。所以在你的项目根目录中输入：

npm install font-awesome --save

(Of course I assume you have node.js and npm already installed. And you've done npm installin your projects root directory)

（当然我假设你已经安装了 node.js 和 npm。你已经npm install在你的项目根目录中完成了）

Then edit the resources/assets/sass/app.scssfile and add at the top this line:

然后编辑resources/assets/sass/app.scss文件并在顶部添加这一行：

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

Now you can do for example:

现在你可以做例如：

npm run dev

This builds unminified versions of the resources in the correct folders. If you wanted to minify them, you would instead run:

这会在正确的文件夹中构建资源的未缩小版本。如果你想缩小它们，你可以运行：

npm run production

And then you can use the font.

然后你就可以使用字体了。

Answer 2

回答by Karan

For Font Awesome 5(webfont with css)and Laravel mixinadd package for font awesome 5

对于Font Awesome 5（带有 css 的 webfont）和Laravel mixin，为 font Awesome 5添加包

npm i --save @fortawesome/fontawesome-free

And import font awesome scssin app.scss or your custom scss file

并在app.scss 或您的自定义 scss 文件中导入字体真棒 scss

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

compile your assets npm run devor npm run productionand include your compiled css into layout

编译您的资产 npm run dev或npm run production将您编译的 css 包含到布局中

Answer 3

回答by Karl Hill

How to Install Font Awesome 5 in Laravel 5.6 (The Right Way)

如何在 Laravel 5.6 中安装 Font Awesome 5（正确方法）

Build your webpack.mix.jsconfiguration.

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

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

Install the latest free version of Font Awesomevia a package manager like npm.

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

npm install @fortawesome/fontawesome-free

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

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

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

In your main SCSS file /resources/assets/sass/app.scss, import one or more styles.

在您的主 SCSS 文件 /resources/assets/sass/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';

Compile your assets and produce a minified, production-ready build.

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

npm run production

Finally, reference your generated CSS file in your Blade template/layout.

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

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

Answer 4

回答by Ramesh Navi

This is for new users who are using Laravel 5.7(and above) and Fontawesome 5.3

这适用于使用 Laravel 5.7（及更高版本）和 Fontawesome 5.3 的新用户

npm install @fortawesome/fontawesome-free --save

and in app.scss

并在 app.scss 中

@import '~@fortawesome/fontawesome-free/css/all.min.css';

Run

跑

npm run watch

Use in layout

在布局中使用

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

Answer 5

回答by rap-2-h

For Laravel >= 5.5

对于 Laravel >= 5.5

Run npm install font-awesome --save
Add @import "~font-awesome/scss/font-awesome.scss";in resources/assets/saas/app.scss
Run npm run dev(or npm run watchor even npm run production)

跑 npm install font-awesome --save
添加@import "~font-awesome/scss/font-awesome.scss";在resources/assets/saas/app.scss
运行npm run dev（npm run watch或什至npm run production）

Answer 6

回答by Hyder B.

I am using Laravel 5.5.14 and none of the above worked for me. So here are the steps I did to make it work.

我正在使用 Laravel 5.5.14，但以上都不适合我。所以这是我为使其工作所做的步骤。

1.Install font-awesome by using npm:

1. 使用 npm 安装 font-awesome：

   npm install font-awesome --save

2.Move the fonts to your public directory by adding this line in your webpack.mixin.js

2.通过在您的 webpack.mixin.js

mix.copyDirectory('node_modules/font-awesome/fonts', 'public/fonts/font-awesome');

3.Open your app.scss to specify the path of the fonts in your node_modules and which relative path to use for compilation:

3.打开你的 app.scss 来指定你的 node_modules 中字体的路径以及用于编译的相对路径：

$fa-font-path: "../fonts/font-awesome" !default;
@import "~font-awesome/scss/font-awesome.scss";

Answer 7

回答by Farshad Fahimi

the path you are using is not correct you could just open the node_module and find the path of font-awesome. use could use js or svg font but i prefer the css style.

您使用的路径不正确，您可以打开 node_module 并找到 font-awesome 的路径。使用可以使用 js 或 svg 字体，但我更喜欢 css 样式。

at first use this command to install font-awesome-free npm install --save-dev @fortawesome/fontawesome-free

首先使用此命令安装 font-awesome-free npm install --save-dev @fortawesome/fontawesome-free

after that you can do this

之后你可以这样做

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

and I copy the font path like below this is optional

我复制下面的字体路径这是可选的

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

and finally just run the script npm run devor npm run watchin laravel

最后只运行脚本 npm run dev或npm run watch在 Laravel 中

Answer 8

回答by Samundra

I have recently written a blog about it for the Laravel5.6. Link to blog is https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

我最近为 Laravel5.6 写了一篇关于它的博客。博客链接是https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

The steps are similar to above description. But in my case, I had to do extra steps like configuring the webfonts path to font-awesome in "public" directory. Setting the resource root in Laravel mix etc. You can find the details in the blog.

步骤与上述类似。但就我而言，我必须执行额外的步骤，例如在“public”目录中将 webfonts 路径配置为 font-awesome。在 Laravel mix 等中设置资源根目录，具体可以在博客中找到。

I am leaving the link here so it helps people for whom the mentioned solutions don't work.

我将链接留在这里，以便它可以帮助那些提到的解决方案不起作用的人。

Answer 9

回答by Vahid Alvandi

npm install font-awesome --save

add ~/ before path

在路径前添加 ~/

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

Answer 10

回答by Sakhri Houssem

first install fontawsomeusing npm

首先使用npm安装fontawsome

npm install --save @fortawesome/fontawesome-free

add to resources\sass\app.scss

添加 resources\sass\app.scss

// Fonts
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

and add to resources\js\app.js

并添加到 resources\js\app.js

require('@fortawesome/fontawesome-free/js/all.js');

then run

然后运行

npm run dev

or

或者

npm run production

php 如何在 Laravel Mix 中安装 Font Awesome

提问by Lucas Lopes

回答by Kornel

回答by Karan

回答by Karl Hill

How to Install Font Awesome 5 in Laravel 5.6 (The Right Way)

如何在 Laravel 5.6 中安装 Font Awesome 5（正确方法）

回答by Ramesh Navi

回答by rap-2-h

For Laravel >= 5.5

对于 Laravel >= 5.5

回答by Hyder B.

回答by Farshad Fahimi

回答by Samundra

回答by Vahid Alvandi

回答by Sakhri Houssem

相关推荐

最近更新

标签

php 如何在 Laravel Mix 中安装 Font Awesome

提问by Lucas Lopes

回答by Kornel

回答by Karan

回答by Karl Hill

How to Install Font Awesome 5 in Laravel 5.6 (The Right Way)

如何在 Laravel 5.6 中安装 Font Awesome 5（正确方法）

回答by Ramesh Navi

回答by rap-2-h

For Laravel >= 5.5

对于 Laravel >= 5.5

回答by Hyder B.

回答by Farshad Fahimi

回答by Samundra

回答by Vahid Alvandi

回答by Sakhri Houssem

相关推荐

在 PHP 中在 MySQL 表的每一行上添加一个删除按钮

php 在 Codeigniter 中上传 - 不允许您尝试上传的文件类型

php 如何在 Windows 上检查 XAMPP 的版本？

php 此集合实例上不存在属性 [id]

相关推荐

最近更新

标签