如何将阿里图标库的引入项目中？

 

阿里图标库官网：https://www.iconfont.cn/

（1）方法一：通过下载png类型的图片，使用image标签来使用图标

 

 

 

（2）方法二：使用字体图标方式

1）选中icon,并添加到购物车

2）点击右侧购物车，将icon添加到新建项目中即可

3）将字体图标下载到本地

 

4）将下载下来的iconfont.css文件添加到项目中

（只保留iconfont.css文件时，其他的url都得删除，只留下一个base64得url ,否则项目报错，找不到文件；如果不删，所有文件都得导入）

 

5）在页面中引入字体图标

@import '../../common/iconfont.css'; // 引入字体图标得文件 

//text标签和i 标签都可以使用 （小程序中）
<text class="iconfont icon-002-lock"></text>
 <i class="iconfont icon-001-courthouse"></i>

效果展示:

 

补充：

添加全部的字体图标内容

（1）下载好字体图标文件后，将选中的文件存放到static下font文件夹中

（2）配置iconfont.css中的文件位置，使用~@/static/font 的绝对路径

（3）在App.vue中全局引入字体图标

<style lang="scss">
	//全局引用字体图标
	@import  "/common/iconfont.css";
	/*每个页面公共css */
</style>


//使用方法：
//将iconfont.css 中的class名复制出来即可
.icon-fuwuchaoshi:before {
  content: "\e61d";
}

<text class="iconfont icon-fuwuchaoshi"></text>

效果展示：  

扩展，添加新的图标：跟方法2前面添加图标到购物车一样操作，之后将所有的文件进行替换即可