问题标签 [icon-fonts]

我在 Chrome 中的 icomoon 字体有问题，有时不显示图标。我没有得到缺少字体的空矩形“后备”。

当我选择带有图标的元素时，它会出现，因此重新绘制将修复它。但是强制重绘是一个糟糕的解决方案......

我找到的关于 Chrome 中错误图标字体的唯一解决方案是使用 PUA 代码，但我已经这样做了。

我的图标 CSS：

@font-face规则_

我已经尝试解决这个问题几个小时了，我一直在寻找一个好的解决方案，但没有太多运气。它让我发疯，摆弄填充和行高。垂直对齐它没有做任何事情（这是在另一个线程中建议的）。

基本上我正在尝试创建一个响应式导航菜单，当点击或单击图标时，当菜单显示时将向下推页面。我在不使用框架的情况下使用移动优先策略（该站点很简单，所以我觉得 Bootstrap 是矫枉过正）。

但是图标顶部似乎有一个额外的 1px。

我正在使用 Chrome，我已经复制了这个问题供大家查看。

您可以查看结果：http: //jsfiddle.net/thecornishninja/jK8rD/

看到图标不是垂直居中了吗？看起来它顶部有一个额外的 1px 或 2px，无论我使用 rem 还是 px，它都在那里。

我使用的是 Fontastic 的代码，但出于演示目的，我使用的是 Bootstrap 中更简单的 CSS。两种方法都存在问题。

这可能是一件简单得可笑的事情，我很可能最终会踢自己的屁股，但我的大脑已经炸了，所以我希望你能帮忙。

我正在使用带有图标字体的 Polymer 元素。将它包含在元素中的最佳方式是什么？

我使用 Fontastic.me 创建了一个图标字体。除了在 Android 4.2.2 和 4.3 的本机浏览器（例如：现代三星平板电脑）中，它工作得很好。在这些浏览器中，整个字体的字符没有宽度。使用 Fontastic.me 制作的每种字体都会发生这种情况（甚至是它自己提供的字体）。这是使图标居中（水平）时的主要问题。

我已经建立了一个网页来测试它：http ://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html 。粉红色显示字符的宽度。以下屏幕截图将正常行为与 AndroidBrowser-behaviour 进行了比较：http: //ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png

我确定这是因为 Fontastic，因为当我使用 Icomoon 作为字体生成器时，问题不会发生。我也通知了所有者，但他说他无法调查，因为他现在不知道如何在他的 Mac 上安装 Android 模拟器。

有没有人知道这里发生了什么？是什么导致字符空间崩溃？

我想在我的网页中使用字体框架。字体框架类似于Brownstone字体框架，因此如果您键入字母 e，例如它是一个大的卷曲框架。我想将这些框架放在网页上的图像周围。

我能想到的最明显的方法是在一个跨度中键入字母 e 与一个使用 @fontface 的具有 Brownstone 框架的字体系列的类并从那里设置它的样式但是有没有一种方法可以用纯 css 和不必在看起来像错误标记的跨度中键入 e？

我没有发现任何类似的问题，也没有找到比我建议的更好的方法。

你好。这是我的网站。问题是图标字体在 Chrome、Safari 但 Firefox 上运行良好。能否请你帮忙。

奇怪的是它在具有相同结构的临时站点上运行良好。

我有一个 svg，当它在任何浏览器中打开时都很好。我正在尝试使用http://icomoon.io/将其中的一堆转换为字体图标，但导入后它没有正确显示。我也尝试使用http://fontastic.me/但没有运气。

这是 SVG 图像标记 -

我猜这与图像的创建方式有关，但找不到太多关于如何解决问题的资源。任何帮助都是极好的！

谢谢。

我想要字体图标的替代品。所以我决定创建 SVG 图标。我正在使用 Grunt 和 https://github.com/jkphl/grunt-iconizr。一切正常。我使用 Grunt Iconizr 输出 SCSS 文件：

第一的

第二个输出文件，替代第一个文件：

我想在图标上创建悬停效果。有什么办法可以使用纯 CSS 解决方案实现悬停效果？我知道我可以使用fill: #CCC;属性来做到这一点……但前提是我的 HTML 代码中有 SVG。如果我使用字体图标，可以通过更改 CSS 颜色属性轻松完成。有什么办法可以改变附加的 SVG 的颜色background-image: url(...)吗？

我正在使用Fontastic的自定义字体来显示您在此处看到的图标：

图标只能是一种颜色加上透明度，在这种情况下是您在上面看到的绿色。

在某些情况下，我希望将这些图标的“详细信息”显示为白色——我想要实现这一点的方法是在图标的适当部分后面放置一个白色背景。期望的最终结果：

我尝试添加背景颜色并使用50% border-radius，但我得到这样的结果：

和这个（在我的图标元素上使用 display: inline-block 关闭）：

我觉得我遇到了困难，因为图标元素本身是矩形的，并且使用我对 CSS 的知识似乎不可能将图标后面的圆形背景居中。

我在这里放了一个图标的演示（对不起，它不是在一个'css fiddle-like'网站，但我很难设置它来匹配我的情况）：https ://hoplu.com/troubleshooting

有小费吗？我觉得可能有一个我不知道的 css 属性使这项工作变得更加容易，但一直无法确定一个。

我有一个自定义字体可以在我的网页上嵌入人口统计图标，附加信息存储在每个图标的“data-msg”元素周围的链接中。问题是如果不使用链接属性的通用 CSS 分配，我似乎无法为这些鼠标悬停消息定义 CSS。这使得页面上的所有链接看起来都很奇怪。

你如何将 CSS 效果限制在这些图标上？

我在 jsfiddle 上创建了我的问题的一个工作示例（即使这是一个纯 css 问题）：http: //jsfiddle.net/V6vpM/1/

这是代码：

CSS

CSS - 这是需要在 CLASS 中的部分，但是当我这样做时，它会破坏鼠标悬停效果：

这是HTML：