uniapp项目或者vue项目引入阿里图标库

一、阿里图标库

1.创建图标库项目

官网地址：iconfont-阿里巴巴矢量图标库

登录完成之后点击资源管理中的我的项目

根据自己的需求创建项目，如下图所示：

2.添加图标到项目中

回到首页，对想要的图标进行搜索，会出现一大批相关的图标，选中符合需求的图标并添加入库

入库成功后，可以在导航栏点击购物车图标进行查看并添加到刚刚新建的项目当中

确定添加之后会跳转到我的项目这里，选择font class，然后下载到本地

最后会得到这些文件

二、项目配置

1.基本设置

在项目根目录static（有的项目可能在src目录下，没有可以新建一个，或者放在存放静态资源的文件夹下面）中新建一个iconfont文件夹，把刚刚下载好的文件复制进去，如下图所示：

修改iconfont.css文件里面的路径，加上绝对路径，否则会报找不到改模板的错误：

然后在App.vue里面引入图标的css，如下所示：

<style>
@import '@/static/iconfont/iconfont.css';
</style>

2.使用方法

配置好上面的代码后，可以在任意页面中使用class进行引用图标，具体格式如下：

<view class="iconfont icon-shixin"></view>

iconfont是一定要写的，代表渲染图标， icon-shixin则是具体渲染的是哪个图标，可以在iconfont.css里面查看有哪些图标，如果忘记了对应类名对应的图标，可以前往官网我的项目中查看：

三、注意点

1.后期要添加新图标怎么办？

在官网把新添加的图标加入项目，然后下载文件，更换掉项目之前的文件，注意路径要修改为绝对路径

2.新添加的图标不能渲染怎么办？

如果新图标没有渲染成功，则可能是缓存的原因，可以重启项目，一般就可以解决了