阿里矢量图标库 - 如何修改和使用自定义字体名称

前言

此篇直接绕过下载和vue 项目中的使用，如果对这块内容还不清楚，可先参考 《阿里矢量图标库 - Font class 方式使用说明》

1. 三种使用方式

下载后，打开demo_index.html，在页面最下有对阿里矢量图标库的使用介绍。我偷懒直接截图，可仔细阅读对比他们的区别。本篇仅介绍Unicode和Font class两种方式。

2. iconfont.css

在修改自定义字体名称前，我们先仔细看看 iconfont.css 这个文件。图中有 3 个 iconfont，

1. 字体名称，这里是定义字体名称；

2. 根据 1 的命名来使用，如果 1 改变，这里也得改；

3. class 名称，Font class 方式时使用，其实与 1、2 无关；

3. 第一次修改

这里仅修改 1 和 2，注意这两个必须保持一致；

<!-- Unicode 方式 --><span class="iconfont">&#xe635;</span>

<!-- Font class 方式 --><span class="iconfont icon-icon-test"></span>

在浏览器开发者工具中可看到这里的 font-family 已经是 my-iconfont。仅内部改动，对外部使用没有影响。

4. 第二次修改

现在三个地方都改成一样的。

<!-- Unicode 方式，注意 class 名称是 my-iconfont --><span class="my-iconfont">&#xe635;</span>

<!-- Font class 方式，注意 class 名称是 my-iconfont --><span class="my-iconfont icon-icon-test"></span>

可以看出在修改了 3 后，外部使用也必须修改；

5. 再看 iconfont.css

这里使用 Font class 方式，很好的说明了：

font-class 是 Unicode 使用方式的一种变种