@Iconfont

.以字体图标|文字的形式呈现图像，多用于图标，可以取代精灵图的部分应用; .在线使用、本地使用; .可以按照 Unicode、Class 和 Symbol 三种方式使用图标; .可以使用 <i> 或者 <span> 作为字体容器；甚至可以使用 <div>; .可以使用彩色图标; .每次往项目中添加、删除字体图标时，都需要重新更新一下 CSS 资源; .图标类名字区分大小写; .更多使用细节，请参考官方文档; .其它字体库 boxicons、fontawesome、 remixicon、 iconfinder、yesicon、icomoon、iconify
准备字体图标文件: 注册|登陆：打开阿里字体 https://www.iconfont.cn，创建账户

创建项目；也可以在收集完图标后再创建；部分环境，如微信小程序需要 base64 的格式，请在项目设置中勾选

查找图标：搜索并选择字体图标；添加到购物车[免费]；如果需要使用图片，直接下载为图片格式

将购物车中的字体图标添加到项目

更新并生成链接；可以下载到本地使用[推荐]；也可以在线使用

Font Class

在线使用

复制项目下面生成的在线 fontclass 链接到 H5 项目的 <link>中；通常忽略网络协议 https 或 http，由系统决定

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3859342_55f4w9rdzau.css">

在 <i> 使用基类 iconfont 和相应的字体图标类名

<i class="iconfont icon-xxx"></i>

本地使用

在阿里字体图标项目处，选择：下载至本地，建议创建单独的文件夹保存

在 H5 项目 <link> 中引入其中的 CSS 文件。注意文件路径

./font_2357817_yw2cn9gbib/iconfont.css

在<i>使用基类 iconfont 和相应的字体图标类名

<i class="iconfont icon12"></i>

类本质上也是使用了伪元素；请查看字体文件或 F12 检查元素

Symbol

在线使用

支持多色图标

拷贝项目下面生成的 Symbol 代码链接到脚本 <script>

<script src="//at.alicdn.com/t/c/font_3859342_gpyhrzeh5u.js"></script>

加入通用 CSS 代码（引入一次就行），并根据需要调整大小；这里是图标的样式，也可以自己定制，非必须

<style type="text/css">
  .icon {
      width: 1em; height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
  }
</style>

挑选相应图标并获取类名，应用于页面；保留 #

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

Unicode

兼容性最好，支持 IE6+，及所有现代浏览器

支持按字体的方式去动态调整图标大小，颜色等等

可以在线使用或本地使用

在线使用

拷贝项目下面生成的 font-face 字体代码到 CSS 中

@font-face {
font-family: 'iconfont';  /* Project id 2357817 */
src: url('//at.alicdn.com/t/font_2357817_dhel13phics.woff2?t=1632974998048') format('woff2'),
        url('//at.alicdn.com/t/font_2357817_dhel13phics.woff?t=1632974998048') format('woff'),
        url('//at.alicdn.com/t/font_2357817_dhel13phics.ttf?t=1632974998048') format('truetype');
}

定义使用 iconfont 的样式

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

挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

[] 伪元素 - 定制列表标记

准备并引入 Unicode 格式的字体图标；如上

使用伪元素指定为 Unicode 编码

指定字体家族为 iconfont

li {
  list-style: none;
}

li::before {
  content: '\e6e0';
  font-family: 'iconfont';
  color: #f40;
}

如果已经引入了类的库文件，可以直接使用对应的 Unicode 编码

Vue

基本操作同前

在线使用

使用url地址请求

在任何位置导入，无论是否勾选 scoped 都是全局使用

@import url(//at.alicdn.com/t/c/font_4235521_vw0a33le7e.css);

本地使用

直接导入本地的 css 文件，需要完整的字体文件夹

在 assets 目录中导入 - base.css 或 main.css；全局使用

@import './download/font_4235521_r6opgv9sz3/iconfont.css';

在 app.vue 的样式中导入，不勾选 scoped，全局使用；勾选 scoped，仅当前组件使用，子组件也不能使用

<style>
@import './assets/download/font_4235521_r6opgv9sz3/iconfont.css';
</style>

在某个组件的样式中导入，不勾选 scoped，全局使用；勾选 scoped，仅当前组件使用，子组件也不能使用

<style>
@import url(//at.alicdn.com/t/c/font_4235521_vw0a33le7e.css);
</style>

使用symbol

在组件逻辑中导入并使用

import '//at.alicdn.com/t/c/font_3859342_gpyhrzeh5u.js'

微信小程序

限字体类格式、本地使用，且必须使用 base64 格式

下载到本地 → 解压 → 复制 iconfont.css 到小程序项目某个目录 → 修改后缀名为小程序的样式类后缀名 .wxss

在 .wxss 中导入；如果全局使用，请在 app.wxss 中导入，并根据需要设置字体样式

@import '../../utils/css/iconfont.wxss';
.iconfont{
  font-size: 32rpx;
}

在页面的 wxml 中使用

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

建议直接复制在线链接的样式内容到样式文件 .wxss