阿里巴巴图标库的使用

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

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

(1)下载到本地引入使用

(2)http形式使用

一、 下载到本地引入使用

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

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

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

4 、点击下载至本地

5、下载到本地之后

如图所示，下载完之后有八个文件，我们只需要拿出ttf、woff、woff2以及iconfont.css 放至自己文件中即可。

6、将css引入页面

<link rel="stylesheet" href="iconfont.css">

7、进行使用

<span class="iconfont icon-youjiantou"></span>

二、 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";
}