打造自己的图标字体库

首先给大家介绍三个网站

// 图标库，选好自己喜欢的图标下载 SVG 文件
iconfont
// 将 SVG 转为字体文件
icomoon
// 将字体转为 base64 码
transfonter

iconfont 具体的操作

1. 将需要的图标添加至购物车

   
   
   iconfont.png
2. 点击下载素材，选择 SVG 格式

// 这里提一下，iconfont 这个网站也可以直接将图标转为字体下载，本文之所里利用 icomoon 网站生成字体是因为 iconfont 生成的图标 css 类名不能自定义，而且类名特别长看着不舒服😂，原谅我的强迫症，觉得麻烦的同学可以跳过 icomoon 这一步。

icomoon 具体的操作

1. 将本地的 SVG 导入，点击左上角的 import icons
   

   iconmoon.png

2. 点击右边的菜单栏，选择 select all
   

   iconmoon_select.png

3. 点击底部的生成

   
   
   iconmoon_create.png

4. 这一步就是我为什么选择这个网站进行字体文件生成了，点击左上角的配置 preferences

   
   
   iconmoon_preferences.png

5. 配置导出的字体名称 和 class 开头名称

   
   
   iconmoon_name.png

6. download

   
   
   iconmoon_download.png

transfonter 具体的操作

1. 添加字体文件，并注意下面的配置，添加完成后点击 convert 转换

   
   
   transfonter.png

2. 转换完成点击 download 下载

   
   
   transfonter_download.png

最后，注意看

1. 打开从 transfonter 下载下来的包，里面有一个 stylesheet.css 的文件，打开复制里面的代码；

2. 粘贴到从 icomoon 下载的最外层的 icon.css 中，把图片中框出来的替换掉；

   
   
   code.png
3. 然后你就可以把 icon 拷走尽情玩耍了；

<i class="icon-add"></i>

过程稍微有点复杂，不过玩儿过一次就好啦；