在项目中引入阿里巴巴 矢量图标库

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

有的时候我们在开发后端管理系统的时候，需要找一些字体图标

iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

网站

www.iconfont.cn/ 如果打开比较慢，不用怀疑，就是梯子的问题

你需要先注册登录一个账号，新建一个项目

功能

可搜索，库也比较大

可以直接下载

也可以添加到项目中后，一块打包下载（推荐，方便管理）

甚至可以编辑小图标

如何在项目中使用

下载demo文件后得到

下载后是一个demo案例

关注这两个关键文件

步骤

1，复制出来字体文档包，放到css目录 ，这里有可能字体文件的路径不对，需要自行修改

2，公用css 推荐新建一个icon.css 引入到主样式文件

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

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3，使用图标

<span class="icon iconfont">&#xea3b;</span>

注意） 其中span 中的内容 来源 于字体 图标标志

其他样式修改

可以想操作字体一样，操作 字体文件