laravel 6.^ 集成字体图标
2020年2月16日本项目我们将使用 Font Awesome 来作为字体图标库。Font Awesome 提供了可缩放的矢量图标,允许我们使用 CSS 所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
1. 安装
1 |
$ yarn add @fortawesome/fontawesome-free |
输出:
打开 package.json
可以看到新增了这一行依赖:
package.json
1 2 3 4 5 6 7 8 9 |
{ . . . "dependencies": { "@fortawesome/fontawesome-free": "^5.6.3" } } |
2. 载入
我们还需要在样式中载入:
resources/sass/app.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Variables @import 'variables'; // Bootstrap @import '~bootstrap/scss/bootstrap'; // Fontawesome @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontawesome-free/scss/regular'; @import '~@fortawesome/fontawesome-free/scss/solid'; @import '~@fortawesome/fontawesome-free/scss/brands'; /* universal */ . . . |
3. 编译
运行 mix 编译命令:
1 |
$ npm run watch-poll |
能看到类似以下的输出即可: