uniapp自定义字体图标、使用阿里矢量图标库

1、基本使用

首先进入阿里图标库网站

然后搜索自己想要的图标，中英文都可以 ，找到之后添加购物车

 然后在购物车里面添加到项目，如果没有项目的需要先创建一个项目，创建项目很简单就不叙述了

然后在资源管理里面可以找到我们的项目

2、导入项目

 

可以看到项目中有三种编码形式，统一编码，样式类编码，跟唯一值编码，这里我们使用第二个样式类编码，点开下方的连接，或者复制代码新开空白网页复制链接地址输入回车，然后可以看到我们熟悉的css代码，然后全选复制

 

 

 然后在自己的项目中新建一个css文件，名字自己随便取，不过为了语义化我这里就直接取名iconfont，把刚刚复制的代码全都粘贴过来，粘贴过来之后有个重要的步骤就是个给代码地址前面加上https:, 注意三个地址都要加，至此就导入完成了

3、使用

 使用就很简单了，直接给html元素加上class类名就行了，

使用之前记得在项目的根目录文件app.vue中的style引入样式文件

/* 引入阿里字体图标库 */
	@import url("static/style/iconfont.css");

 

 

举例：比我我要使用一个列表图标 他在我的项目中叫icon-liebiao,所以在使用时我们就直接按这个名字来，前面要加上iconfont，不管是view容器，还是text标签都可以使用，

 使用效果:

如果需要调整大小、颜色等等直接给他再加样式就行了，如大小font-size：50px;颜色color：red;

注：如果需要继续添加图标记得点击更新代码然后再复制过来，然后有时可能会出现乱码显示不出，或者直接显示不出，这时等一会或者重启下项目就好了，为了保险起见我们也可以直接下载代码文件复制到项目基本都是差不多的步骤