一捧阳光 > 在线创建自己的图标字体(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