阿里巴巴图标库两种使用方式

阿里巴巴图标库网站：http://www.iconfont.cn/

【一 】、下载到本地引入使用
【二】、http形式使用

---

一、 下载到本地引入使用

---

1、进入网站搜索需要的图标

2、找到自己需要的图标加入购物车

3、点击购物车图标，添加到项目，没有项目可以创建项目

4 、点击下载至本地

在首页【资源管理】-【我的项目】，也可看到如上图所在位置

5、下载到本地之后拿出ttf、woff、woff2以及iconfont.css
放至自己文件中

6、将css引入页面

7、进行使用

*注意引入路径

@font-face {font-family: 'iconfont';  /* Project id 3725671 */src: url('@/common/font/iconfont.woff2?t=1668500075217') format('woff2'),url('@/common/font/iconfont.woff?t=1668500075217') format('woff'),url('@/common/font/iconfont.ttf?t=1668500075217') format('truetype');
}

二、 http形式使用

---

按照方法一方法走到第四步
点击【查看在线链接】

复制生成的代码，在样式中使用

@font-face {font-family: 'iconfont';  /* Project id 3725671 */src: url('https://at.alicdn.com/t/c/font_3725671_drcfelqiw37.woff2?t=1668507209713') format('woff2'),url('https://at.alicdn.com/t/c/font_3725671_drcfelqiw37.woff?t=1668507209713') format('woff'),url('https://at.alicdn.com/t/c/font_3725671_drcfelqiw37.ttf?t=1668507209713') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-xinxi:before {content: "\e763";
}.icon-sousuo:before {content: "\e651";
}.icon-zanting:before {content: "\e613";
}