字体图标

iconfont 介绍

iconfont 是一种字体，只是该字体是各种图标样式。此处所用 iconfont 专指 阿里的 iconfont-阿里巴巴矢量图标库 (opens new window)。
官方使用教程 (opens new window)

优点

• 图标数量众多，对于不会设计的前端很友好；
• 字体图标一次加载，相比图片可减少网络请求；
• 字体为矢量图，放大不会失真；
• 文件体积小；
• 平台兼容性较好。

缺点

• 每次新增时需要重新下载替换字体文件（选择在线方式，则只需要替换在线字体链接）
• 只支持单色（svg等支持多色）

目录结构

├─ src
│  └─ assets
│     └─ iconfont    # 字体文件

使用

<!-- xxx 为图标名称 -->
<i class="iconfont icon-xxx"></i>