【笔记】前端网页中使用图标的最实用方法: iconfont css

uniapp等前端框架本身有一些图标插件，但是数量太少不是很好用。

iconfont里有海量的各式各样的小图标： iconfont-阿里巴巴矢量图标库

打开网站，里面的图标应有尽有（注意版权，尽量用官方图标库，选免费可商用的授权： iconfont-阿里巴巴矢量图标库）。

iconfont提供了css unicode等方式，可以非常方便的在网页上嵌入和管理这些图标。

操作步骤：

1. 把图标添加入库：

2. 把库中的图标添加到项目

3.找到我的项目

4. 复制项目的代码：

5.粘贴到网页的css中，例如uniapp项目，可以粘贴到App.vue的style块

6. 添加一个css的类， 例如.icon （参考上图）

.icon {
		font-family: iconfont;
	}

7. 使用：

在任意一个html标签的class中加入这个类名（例如上面的icon ），内容中加入需要的图标的unicode代码

unicode代码从这里复制：

8. 查看效果

可以看到，编辑后面显示了这个小图标