使用icomoon的SVG到Ico生成多个路径而不是单个对象字形

Question

我使用illustrator创建一个SVG文件，使用icomoon将其转换为字体图标。但我对最终结果有疑问。我的图标基本上是同心圆的集合，在插图画家中保存为SVG。使用iconmoon将SVG转换为图标，我看到图标被转换为多个路径而不是单个对象。

    <span class="icon-4">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
<span class="path6"></span>
</span>

链接到图像：http://imgur.com/FnWgQNF

Answer 1

我有同样的问题。在插画家中尝试查看透明度网格，删除插画中的所有颜色，减去透明度，所有这些都没有运气。

然后我在IcoMoon中发现，如果在底部而不是单击“生成字体”，则选择“SVG and More”，您可以单击问题图标并在应用程序中编辑SVG。 IcoMoon有一个“删除颜色”按钮（带x的下拉）。一旦你完成了，你可以关闭那个盒子，你的svg是单色的，不需要重新进口。然后，您可以下载它，或者只需单击以生成您的字体。田田！ :-)

我花了一段时间才弄明白这一点，但是一旦我这样做，我就被卖掉了，真的很棒。

Answer 2

您导入的SVG中可能有多种颜色。因此，您的图标被解释为“多色”。由于字体字形只能有一种颜色，因此IcoMoon必须使用多个路径来显示多色图标。尝试将SVG中的所有颜色更改为相同颜色并重新导入SVG。

Answer 3

Keyamoon是对的。从Icomoon查看：

默认情况下，字体字形不能有多种颜色。使用CSS，IcoMoon将多个字形叠加在一起，以使颜色字形成为可能。因此，这些字形需要多个字符代码，并且不能具有连字。

为避免多色字形，请在将所有颜色更改为相同颜色后重新导入SVG。

Answer 4

要更改Illustrator中的图标并按照注释中的说明进行操作：

你需要清除填充物

• 选择每个路径，然后使用“填充”工具x删除设置为“无”的颜色
• 使用SWap Fill和Stroke工具SHIFT + x选择需要着色的每个路径。很可能你会将这种颜色设置为#000000

2.减去形状并更正svg

• 要显示形状的颜色，请选择“视图”>“显示透明度网格”SHIFT + CTRL + d
• 通过在“图层”窗格中选择路径来创建复合路径。
• 选择路径后，右键单击图像并选择Make Compound Path。

3.在Illustrator中保存到svg

• 在Illustrator中使用“另存为...”将图标另存为svg
• 注意选项窗口中的SVG Code ...按钮，通过检查<style>标签的源代码来验证更改。
• 如果做得正确，你最终得到stroke: #ffffff;规则，那没关系。但fill: #ffffff;不应再被看见了。

4.在Icomoon中使用App

• 导入课程图标
• 使用编辑工具ALT： 将Grid设置为16 选择“缩放”以使用“适合画布” 选择“画布/对齐”以使用“方形画布”和“对齐到中心” 如果有任何显示，请选择删除颜色