阿里云icon图标使用

847 阅读1分钟

1、阿里云图标官网

打开阿里云icon图标官网阿里云图标,进行登录注册

1630640379(1).jpg

2、查找自己需要的图标

1630640417(1).jpg

选择好图标后,点击加入购物车,然后继续查找自己需要的图标,全部找到后,点击购物车,即可看到自己添加的图标

1630640567(1).jpg

点击下载至本地,如果你没有创建项目的话,会提示你创建项目,可以使用默认的,也可以自己命名,但是不能使用el开头,和element ui 图标区分开来

1630640791(1).jpg

下载至本地后,进行解压,即可得到如下文件:

1630640878(1).png

3、复制全部的文件,放到项目中

将所有的文件复制到自己项目的static文件,或者assets文件中,新建icon文件夹,将所有文件复制到此文件中:

1630641071(1).jpg

4、在项目中引入并使用

打开demo_index.html文件,查看如何使用

image.png

App.vue文件中进行引入 @import "../src/assets/icon/iconfont.css"; 在需要使用的文件中进行使用

image.png

image.png

阿里云icon图标使用成功