欧阳简之 > 在线创建自己的图标字体(IconFont)

热爱代码，对每一行代码保持一颗敬畏之心。

如果要高质量定制自己的图标字体，可参考：https://segmentfault.com/a/1190000005614532，本文主要介绍如果**在线制作**自己的图标字体，简单方便。

自己制作自己全新的图标字体文件

1、百度字体编辑器

访问：http://fontstore.baidu.com/static/editor/index.html，新建

2、阿里图标库库挑选自己想要的图标

在 https://www.iconfont.cn/home/index 阿里图标库挑选自己想要的图标，下载svg

1.png

3、导入图标到图标字体文件

2.png

4、设置字形信息，编辑unicode

这个unicode即我们css调用时的代码，例如：

.icon-home:before {
    content: "\100";  // unicode为$100，unicode可由字母+数字组成
}

3.png

5、导出图标字体文件，大功告成

5.png

4.png

在别人的图标字体文件新增图标

还有一种情况，那就是我们在用一款开源的图标字体，但是，项目中刚好要用某个图标而他缺少了，那我们可以在原有图标字体文件上新增我们想要的图标。

具体流程其实和创建我们自己的图标字体文件差不多了，就不一一截图了。

1、百度字体编辑器新建图标字体

2、导入字体文件 （这里注意直接导入的是字体文件）

3、导入我们要新增的图标

4、导出ttf字体文件

5、EverythingFonts转换其他格式

https://everythingfonts.com/ttf-to-eot 转换你需要的其他格式，完美

tagged by none