问题标签 [icon-fonts]

我使用在线工具 icomoon 生成了一些基于字体的图标，并尝试将它与我拥有的引导模板一起使用。

问题是bootstrap的css使用了“icon-”前缀，而我的icon-font使用了相同的，比如css类名的“icon-puzzle”。

这是正在发生的事情的图片（我的自定义字体（蓝色拼图）与引导图标 spritesheet 的一部分一起呈现）

所以，我当然可以更改我的图标字体以使用不同的 css 类前缀，例如“font-icon-puzzle”， 但我想与引导程序正确集成，而不是为我的字体图标创建一次性异常。

有人可以推荐一个更好地与引导程序集成的替代方案吗？

问题

这是一个相当离奇的问题。我在 linux 上设计了一个网站，并加入了一些带有旋转的 CSS 过渡。最后它看起来像这样，（我点了它，所以你可以看到它）。您可以看到自行车自转轴。这是在 Firefox 上捕获的，但在 Chrome 和 Opera 中的行为完全相同。（它们的最新版本）

现在，当我使用 Windows 时，这是我在 Firefox 和 chrome 中看到的（都是最新版本）。它不再绕轴旋转。

里面是什么？

没什么特别的。只是过渡旋转所必需的，带有一些混合器可以使其跨浏览器。我制作了这个代码笔来向您展示，但我真的找不到问题所在。

也许有人对 windows/linux 如何解释这种差异有更多的了解。如您所见，我使用的是图标字体。Windows 和 linux 都对类型进行了一些优化，众所周知这些优化是不同的。这有什么关系吗？

我知道图标字体只是字体，您可以通过调用它们的类名来获取图标，但是图标字体是如何工作的？

我尝试检查 Chrome 中加载的相关图标字体资源，以查看图标字体如何显示图标（与一般字体相比），但我无法弄清楚这是如何发生的。

即使有大量可用的图标字体，我也未能找到有关如何完成“图标字体技术”的资源。还有大量资源展示了如何 集成图标字体，但似乎没有人分享或写下这是如何完成的！

所以指南针中的精灵表生成非常棒；但是，光栅化图像可能会限制某些事情。我们有足够的图标，现在需要使用不同的颜色和大小，我们开始为它们制作图标字体。

我想知道是否有人为 sass/compass 制作了一个 gem 来获取 svg 文件并输出一堆类似于 compass 中的精灵表功能的散列字体？我在网上搜索并找不到任何东西，所以它可能还不存在？

下一个问题是，有没有一种简单的方法来获取 SVG 并从中创建字体？是否已经有一些工具能够以自动化的方式做这样的事情？

在我的网站http://www.stefaanoyen.be（左栏）的页脚中，我有一些社交媒体图标，它们是图标字体。悬停时，我想要红色的圆圈和白色的图标。红色圆圈有效，但它们后面有一个白色方块。如何将白色限制为图标/圆圈的形状？

这是我的 HTLM：

这是我的 CSS：

非常感谢你的帮助！

斯特凡

几个月来我一直在使用 Symbolset 字体（标准字体和社交字体）并且喜欢它们。不过，最近我注意到 IE8 中的一些问题。我正在做的一些网站根本没有在 IE8 中加载。它在底部的社交栏中有这个：http : //cl.ly/image/3y1o2R2X2L1t，这让我觉得它与符号集文件有关。我无法为我的生活弄清楚问题是什么。有什么想法可能导致问题或我可能遗漏的东西吗？

谢谢！

背景

我目前正在大量使用 webfonts，特别是图标字体。我需要确定特定图标是哪个字符用于测试目的，所以我可以简单地键入字符和/或复制粘贴它。

例子

大多数图标字体的 CSS 是相似的，使用 :before 伪方法，例如

问题

• 我相信这种编码被称为 CSS 字符（十六进制）这是正确的吗？
• 是否有任何工具允许我输入转义的 CSS 字符值并将其转换为我可以复制和粘贴的值
• 是否有可以将其转换为 HTML 十进制值的工具，例如 & = 简单的符号

概括

我希望能够找出它是哪个字符，这样我就可以简单地在键盘上输入它。我花了很长时间查找它，但不太确定这种类型的编码和转换叫什么，所以找不到我要找的东西。我会很感激一些指示。

我已经使用自定义 .svg 图标创建了一个图标字体，但我遇到了填充问题（或者可能是其他问题）。我以前不包含任何填充的图标，以防出现问题。

出于某种原因，图标似乎已经移到了它们应该在的位置上方，我找不到任何方法将它们放回容器中。这是我正在谈论的一个例子：http: //i.imgur.com/RwOKWLp.png

我已将“背景颜色”设置为黄色以突出显示我的问题。

这是一个图标的 HTML：

这是我目前正在使用的 CSS：

@font-face 代码：

有谁知道为什么会发生这种情况？

我目前有一个响应式切换导航菜单，效果很好。我遇到的问题是导航图标。我正在尝试将图标字体用于打开和关闭状态。目前我的 HTML 是：

显示的图标是打开的（三行）图标。我无法确定谁可以使用另一种图标字体将其替换为关闭状态？

这是我当前用于链接的 CSS：

}

}

我想我应该使用 if 语句？但是有没有通过标记或 CSS 的解决方案？如果没有，那么 JS 解决方案会很有帮助。干杯伙计们！

我想知道是否可以在 Google Maps V3 中使用图标字体图标（例如 Font Awesome）作为标记来替换默认标记。要在 HTML 或 PHP 文档中显示/插入它们，标记的代码将是：