Laravel 5.7 中引入 font-awesome

laravel 5.7 自带bootstrap4,但bootstrap4不自带Fontawesome,很多好看的图标无法使用了。。如何解决?

Using a Package Manager

Package managers like npm and yarn are probably familiar tools for you and your team. With them, you can easily upgrade to newer versions of Font Awesome when they are released and better manage access to Pro packages.

Installing the Free version of Font Awesome

You can easily install the latest free version of Font Awesome via npm or yarn:

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

or

yarn add --dev @fortawesome/fontawesome-free

Using webpack.mix.js to reference Font Awesome

Edit the resources/sass/app.scss

//font-awesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/v4-shims.scss";

这里引入了5个scss文件,不知道有没有更简单的办法?

Edit the webpack.mix.js

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

Go to terminal, run the following command

npm run watch-poll

Reference the public/css/app.css in the of page which u want to introduce Font Awesome

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

All Done!

References

安装Font-awesome

本作品采用《CC 协议》,转载必须注明作者和本文链接
日拱一卒
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 1

请问为什么需要import @import "@fortawesome/fontawesome-free/scss/brands.scss"; @import "@fortawesome/fontawesome-free/scss/regular.scss"; @import "@fortawesome/fontawesome-free/scss/solid.scss"; @import "@fortawesome/fontawesome-free/scss/v4-shims.scss"; 这四个scss文件呢,我一开始只引用了fontawesome,一直不起作用,为了解决这个问题可把我累坏了,看到这篇文章才知道还需要再另外引入四个scss文件,想知道为什么?

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
93
粉丝
85
喜欢
153
收藏
121
排名:71
访问:11.4 万
私信
所有博文
社区赞助商