Glyphicons如何运作?我该怎么做自己的?

时间:2014-09-28 00:06:38

标签: html css svg adobe-illustrator glyphicons

我准备了一系列AI / SVG图像,所以我可以在像Glyphicons这样的图标字体库中使用它们。我一直在寻找不同的帖子等,但没有找到太多帮助。

一个建议是使用GlyphAPP,但它仅限Mac,我无法访问Mac。另一个是FontForge,它在我身上多次坠毁。

所以目前我缺少一个从我的SVG创建字体文件的好工具。但即使从那里开始,Glyphicon如何允许他们的图标通过一个简单的<span>标签与一个类一起工作?

我通过Bootstrap3使用它,检查资源导致我http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.woff。这看起来像普通的字体文件, ABC .. abc .. 123 ..

我需要哪些步骤和工具才能从AI或SVG文件转到使用像Glyphicons这样的图标?

我并不反对付费工具,事实上如果Adobe Creative Cloud中直接存在某种我不知何故的东西,我很乐意将其作为解决方案。

1 个答案:

答案 0 :(得分:1)

您的想法是创建一个webfont,其中包含网站上使用的各种矢量化图形,以减少HTTP请求的数量。有时它们被捆绑成一种实际上也包含常见ASCII字母的字体。

然后,您可以使用普通的旧CSS字体指令放置字形,通常与::before::after psuedo属性结合使用。

Dafont.com对available tools的写作相当不错。