第三方图标库学习(二)Font Awesome

Font Awesome

Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

Font Awesome 5 跟之前的版本使用方式差别较大,功能是强大了,图标也更丰富了,但使用也变得更加复杂了。

本人还是比较喜欢之前的使用方式,安装容易,使用简单,毕竟我的需求也没那么复杂,只是简单的有图标可用就行了。

网上相关介绍很多,这里就不废话了,更多详情参见,官方网址:http://fontawesome.dashgame.com/

安装依赖

执行以下命令,安装 font-awesome 依赖。

npm install font-awesome --save

项目引入

在项目 main.js 中引入css依赖。

import 'font-awesome/css/font-awesome.min.css'

页面使用

项目引入之后,直接在页面使用就可以了。

测试效果

 

看到没,就是这么简单,就是这么好用,这也是本人最喜欢的使用方式。

另外还可以选择CDN方式,下载方式等等,这里就不说了,有兴趣自行查阅。

官方网址:http://fontawesome.dashgame.com/

Font Awesome 5 使用方式可以参考

官方教程:https://fontawesome.com/how-to-use

Noodlewar: https://segmentfault.com/a/1190000013173840

原文地址:https://www.cnblogs.com/kunmomo/p/14474497.html