Glyphicons如何运作?我该如何制作自己的?

时间:2021-10-19 07:21:55

I have a series of AI/SVG images that I've prepared, so I can use them in an icon font library like Glyphicons. I've been looking through different posts and such, but haven't found much helpful.

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

One recommendation was using GlyphAPP, but it's Mac only and I don't have access to Mac. Another one was FontForge, which crashed several times on me.

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

So currently I'm lacking a good tool to create a font file from my SVGs. But even from there, how does Glyphicon allow their icons to work through a simple <span> tag with a class?

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

I use it through Bootstrap3, and inspecting the resources leads me to this http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.woff. Which looks like a normal font file, ABC.. abc.. 123..

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

What steps and tools do I need in order to go from AI or SVG files to using my icons like I would Glyphicons?

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

I'm not opposed to paid tools, in fact if there's something directly in Adobe Creative Cloud that I'm somehow missing, I'd love for that to be the solution.

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

1 个解决方案

#1


1  

The idea is that you create a webfont which contains the various vectorised graphics used on a site to cut the number of HTTP requests. Sometimes they are bundled into a font which actually contains common ASCII letters as well.

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

You can then place the glyphs using plain old CSS font directives often in combination with ::before and ::after psuedo attributes.

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

Dafont.com has pretty decent writeup of available tools.

Dafont.com提供了相当不错的可用工具。

#1


1  

The idea is that you create a webfont which contains the various vectorised graphics used on a site to cut the number of HTTP requests. Sometimes they are bundled into a font which actually contains common ASCII letters as well.

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

You can then place the glyphs using plain old CSS font directives often in combination with ::before and ::after psuedo attributes.

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

Dafont.com has pretty decent writeup of available tools.

Dafont.com提供了相当不错的可用工具。