# 字体图标库的使用

文档维护人：木木(linqh@authine.com)、彭宗一(pengzy@authine.com)

注册阿里矢量图标库
联系对应 UED 字体库管理员开启对应项目权限
打开自己的项目找到相应图标库
拷贝 CDN 地址（css/js）
更新/新增 CDN 引用

# 注册阿里矢量图标库

https://www.iconfont.cn

# 联系对应 UED 字体库管理员开启对应项目权限

氚云 ---------> 王心怡
云枢 ---------> 赵海军

# 打开自己的项目找到相应图标库

  h3yun_Base:          氚云基础图标库（用于PC端）
  h3yun_Business:    氚云业务图标库
  h3yun_All:               氚云全量图标库（用于移动端）
  aufontAll:                云枢全量图标库（移动端，PC，后台都使用此图标库）
  aufontBusiness:      云枢业务图标库（仅用于后台选择业务图标）
  aufontBase:            云枢基础图标库（暂时没有用到）

1
2
3
4
5
6

# 拷贝 CDN 地址（css/js）

iconfont 支持三种方式引用，用的最多的是font class 方式，其次是 symbol

# 更新/新增 CDN 引用

在各个工程的更目录下的index.html 或者public/index.html中应用 cdn

例如：

提示

css 和 js 加载任意一个就可以了

加载 css，即使用font-class方式使用时增加字体图标样式即可

<!--项目名就是 iconfont 的字体项目名称-->
<i class="项目名 icon编码"></i> <i class="h3yun_All custom-home-o"></i>

1
2

加载 js，即使用 svg 方式，使用需根据 svg 编码使用

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

1
2
3

svg 可以使用自带渐变色的图标，但非特殊场景一般不使用

提示