很难找到有关如何创建具有两种颜色（facebook -白色和蓝色，google-白色和红色.....）的图标的任何明确信息。客户希望能够随心所欲地更改这两种颜色。我一直在环顾四周，我发现只有http://www.programask.com/question_41701651_multicolored-icon-fonts#对客户来说似乎很简单清晰（在他们想要的时候改变颜色，但我没有了解程序...）。
我目前使用 icomoon，但我找不到如何添加颜色....
所以我明白我需要一个图像编辑器，如果是facebook图标，我选择“f”并将其保存在.svg中，然后与背景相同但“没有f”，我也将其保存到svg ，但是……我如何将它们放在一起以仅引用一个图标？
虽然我不需要用 icomoon 来做（但我需要免费软件），但是有人可以解释我如何通过 css 为图标着色吗？
谢谢
IcoMoon 本身生成用于堆叠字体字形的 CSS。它不使用:beforeand :after（这是 2 种颜色的一个很好的解决方案）。相反，它使用更通用的方法来处理多个spans。它非常适合您想要拥有多种颜色的情况。您所需要做的就是将多色 SVG 导入到 IcoMoon。它会处理剩下的事情。这是其输出的演示：https ://codepen.io/Keyamoon/pen/vXxJgq
使用 icomoon 创建多色图标字体相当容易，但它从多个字形中组合了它们，并且似乎不知道“默认”颜色（可以从父类更改的颜色） - 所以我们需要将它定义为inherit在 CSS 中：
1) 使用您最喜欢的矢量应用程序（如 Inkscape 或 Adobe Illustrator）创建您的 SVG。
重要提示：Icomoon（和其他任何东西）将为SVG 中的每个彩色路径使用一个字形，因此请确保使用相同颜色的路径连接并且不要使用太多颜色......
Illustrator 可以轻松连接复合路径：https : //www.youtube.com/watch?v= jbc3q9bfOH8和连接对象：https : //graphicdesign.stackexchange.com/questions/999/how-do-i-combine -两个物体合二为一的插画……
2) 制作你的 icomoon 字体。
3）在CSS中确定您的“默认”颜色 - 假设它是rgb(62, 55, 60);：
在[class^="icon-"], [class*=" icon-"] {加
/* default color */
color: rgb(62, 55, 60);
并删除所有其他行读数
color: rgb(62, 55, 60);
或者明确地将其更改为
color: inherit;
就是这样。
当我只使用正确连接的两种颜色（例如深灰色和橙色）时，图标中的孩子永远不会超过两个，我可以从根节点更改深灰色<span class="icon-myIconName">......
这是一个带有 2 色字体的工作代码笔，仅使用一个元素，您可以在其中更改颜色……