问题标签 [icon-fonts]

我们有一个图标字体包的图标字体（和相关的 CSS 代码）。但是，我们需要向包中添加更多图标或编辑一些当前图标。

问题是：我们如何在没有昂贵的字体设计软件的情况下做到这一点？我们已经为 Mac 购买了Glyph Mini，但如果有免费服务，您可以去那里，上传您的 SVG 文件并获取新的字体文件，那就太好了。这样您就可以拥有一个充满 SVG 文件的目录，并且当您编辑或添加某些内容时，您可以“编译”您自己的字体。如果有这样的编译器可以从命令行使用就更好了。但是，我还没有见过这样的工具。

有人知道这个问题的简洁免费解决方案吗？

我正在尝试将自定义字体图标添加到我的 sencha 架构师项目中，并删除不必要的主题类，但似乎 Sencha Architect 根本不使用 app.scss（位于我项目的资源/sass 文件夹中）。我所做的更改既没有应用在架构师中，也没有在我启动应用程序时应用。

应用程序.scss

顺便提一下，我确实将 scss 文件编译为 css，它编译得很好。

有人可以详细说明吗？

我在用：

• 煎茶架构师 3.0.2.1375
• 命令：4.0.2.67
• 框架：Sencha Touch 2.3.x

更新：

事实证明，由于主题原因，Architect 不使用 app.scss 文件（请参阅 Phill 的帖子）。当我尝试插入图标字体时，确实出现了另一个问题。找不到字体文件。原因在以下帖子中提到：http ://www.sencha.com/forum/showthread.php?280895-How-to-correct-the-Font-theming-in-Architect3

下面的代码解决了这个问题，我现在可以愉快地使用我的新图标字体了：

要明确。我在 Architect（一个 scss 资源）的主题中添加了一个文件，并添加了上述代码。

我正在创建一些在我的网站中使用的图标字体规则。使用 Sass，我想列出一个列表变量中的所有图标，并使用 @each 来遍历它们。

代码如下所示：

问题是该content:行的反斜杠。我需要它来进行字符编码，但它会转义变量插值，输出如下所示的 CSS：

像这样再添加一个反斜杠：content: "\\#{nth($icon, 2)}";输出这个 CSS：

有没有办法让 Sass 在保持变量插值的同时只用一个反斜杠输出 CSS？

我正在使用 bootstrap 3 和 glyphicons（PRO 版本，但几乎相同，还有一些图标）作为字体。

上下文中的示例代码：

它运作良好。现在我想添加一个悬停颜色变化，它有一些小故障。有时（但并非总是）它不能正确地改变图标侧面的颜色（它在跨度框之外的部分。有时它在鼠标悬停时失败，有时在鼠标悬停时又回到原始颜色。 〜1秒后它修复了。

鼠标悬停失败：

鼠标移出失败：

注意：如果我将字母间距更改为 1.1em 或更大，它似乎可以解决图标右侧的问题，但无法找到解决左侧问题的方法。

错误演示：http: //www.bootply.com/116686

这是我一直面临的一个奇怪的怪癖。这是一个响应式设计，所以在我应用了 600px 最大宽度的媒体查询之后，就像 IE 没有正确应用代码一样。正如您在图像上看到的那样，所有其他浏览器都正确呈现了这一点。这影响了所有现代 IE 版本，我检查了 IE9、IE10 和 IE11。

有人有同样的问题吗？这对我来说是个谜…… IE 的谜！我“喜欢”这个浏览器...

HTML：

CSS：

其它浏览器：

IE9+：

Fontello有一个区域，您可以在其中拖动自定义字体。 此处的 GitHub 样式页面显示他们有一个我想在该 fontello 上使用的自定义字体，有人可以帮我导入它。

我正在尝试将图标字体（特别是 Icomoon）添加到 HTML 选择下拉列表中，就像 Linkedin 在其顶部搜索菜单中一样。

我试过简单地使用选项中的字体图标代码，但它不起作用：

还尝试向选项本身添加一个类，但无济于事：

有谁知道如何做到这一点？

我正在使用我的客户在 Web 应用程序的索引页面上作为标题徽标提供的图标字体中的大图标。徽标占设备宽度的 60%，由一个大圆形徽标（约占图标的 40%）组成，下方有文字，纵向模式下占设备宽度的 60%。

我将带有文本的徽标作为一个矢量图标字体图标，因为客户希望文本与品牌 CI 要求的完全一致。

它在桌面预览和我的 google nexus 4 Dolphin 浏览器上看起来不错，但在 chrome（在 nexus 上）中，标语被切断，有点像“Slogan is h”。如果我切换到横向，它会再次正确显示。

我正在使用 Foundation 5 和 iconmoon 的自定义版本。我无法向您展示演示，因为所有图像都受 NDA 约束。

我在这里不知所措，知道为什么会这样吗？

我正在尝试在左侧的输入中包含一个 Font Awesome，但我没有成功。我从来没有为此目的使用过很棒的字体。有谁知道如何在输入中包含字体？谢谢！

我试图在我的输入左侧包含的字体：

我的html：

我的CSS：

请在 Firefox for Android 版本 28 上查看此页面（http://www.jungledragon.org/apps/jd3/all/recent）的渲染图。问题立即可见：所有那些丑陋的块应该是来自的图标图标字体“FontAwesome”。

这是唯一不呈现它们的浏览器。问题出在我的设置中，因为如果我从 Firefox for Android 访问 FontAwesome 网站，那里的图标呈现得很好。另一个有用的线索是“JungleDragon”标志渲染得很好。这是来自谷歌的网络字体。

我一直在尝试排除此失败的可能原因。特此进行一些尝试：

我曾经在我的 Amazon S3 账户上托管 FontAwesome 的副本，并在那里设置了 CORS 策略以允许跨源请求。为了确保这不是一个因素，我现在将字体托管在同一个域上。没什么区别。

接下来，我将字体的相对路径更改为绝对路径。这也没什么区别。

该站点托管在 Apache 上，我在其中添加了以下内容类型：

最后一行过去有所不同，但我对其进行了更改，使其与 Google 字体的内容类型完全匹配，该字体确实会呈现。这也没什么区别。

在所有尝试中，我每次都完全清除缓存，所以这也没有问题。

请注意，该字体在其他 Android 浏览器（Chrome、Dolphin）以及我所知道的所有桌面浏览器（包括 Firefox）上都可以很好地呈现。

这是我的字体声明：

这是加载 FontAwesome 的默认方式。我更改了许多变体（例如先加载 SVG），但都无济于事。

我现在完全不知道为什么我不能让这种字体在 Firefox for Android 上呈现。