建立字体很棒的图标

时间:2015-05-06 08:38:38

标签: html css svg fonts font-awesome

我会建立自己的字体 - 真棒图标集。特别是我会构建一些具有所有功能的font-awesome副本,但只使用一部分图标。

此外,我真的很感兴趣他们如何在 fonts 文件夹中构建文件。 在github上,我找到了repo,其中包含所有svg图标。在ubuntu上,使用Font Custom,我能够生成给svg文件作为输入,即字体文件,即使我不是很满意。但除此之外,我不明白如何使用font-awesome 合并这些文件。

总结一下,如何使用我自己的svg文件创建自己的字体 - 真棒集?

请不要说使用fontelloicoMoon或类似物,因为我想在我的本地计算机上进行操作,而不使用任何第三方服务。

3 个答案:

答案 0 :(得分:2)

我实际上做了类似的事情,但不得不承认它从来都不是完美的,很可能是由于糟糕的字体转换,从来没有时间让它完美。基本上我使用以下链接(大部分)

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

流程概述

第1步 - 创建单个gylphs(你应该使用特殊字符来避免某人"输入"使用你的字体。

第2步 - 将gylphs选项保存为SVG字体。

第3步 - 将SVG字体转换为网络字体(有很多免费的在线转换器)

第4步 - 生成要使用的CSS类(为所有单个字形创建所有可能的类) - 结果应类似于:" icon icon-lg icon-blue icon - 手" - (更好地使用LESS / SCSS这部分 - 你以后会得到原因) 其中一个包含所有图标的常规设置,另一个控制尺寸覆盖,一个控制颜色,最重要的一个使用:after - >输出图标。

第5步 - 现在你有一个由CSS控制的工作网络字体,制作一个用于选择单个字形的UI。最有可能你应该使用LESS,这样你就可以“暴露”#34;只有用户选择的类(EG。 - icon-1,2,5,8等)所有其他图标仍包含在字体中,但相应的CSS类不会在最终的CSS中输出。

可能有更高级的方法,但这个概述和教程应该可以帮助您掌握基础知识。

答案 1 :(得分:0)

我相信您可以使用FontLab Studio:http://store.fontlab.com/

然而,您可能必须编写自己的CSS,我个人认为使用icomoon或类似的基于Web的生成器生成它更容易,更快,因为它专门用于生成Web字体,在FontLab Studio或类似的桌面之前应用程序用于设计桌面字体,而不是预先构建的css编译器/生成器。

我希望看到桌面发电机。

答案 2 :(得分:0)

我还没有深入挖掘自己的字体图标集,但我认为其中有一些svg数据正在使用中。

就像对不同方式的想法一样 - 你甚至可以在集合类上使用background-img:在/之后

有用的资源:http://iconizr.com/我发现他们的数据网址生成很有用(比fontello更好的svg转换,icoMoon)