关于如何创建两种颜色的图标（facebook-白色和蓝色，谷歌-白色和红色…），很难找到任何明确的信息。客户希望能够随心所欲地更改这两种颜色。我四处寻找，只发现http://www.programask.com/question_41701651_multicolored-icon-fonts#对于客户来说，这似乎很简单明了（当他们想要改变颜色时，但我还不了解程序…）。
我目前使用icomoon，但我找不到如何添加颜色。。。。
所以我知道我需要一个图像编辑器，在facebook图标的情况下，我选择"f"并将其保存在.svg中，然后与背景相同，但"没有f"，我也将其保存到svg中，但随后。。。。我如何将它们放在一起只指一个图标？
虽然我不需要用icomoon来做（但我需要免费软件），但有人能解释我如何通过css给图标上色吗？
感谢
IcoMoon本身生成用于堆叠字体字形的CSS。它不使用:before和:after（这对于两种颜色来说是一个很好的解决方案）。相反，它使用了一种更通用的方法来处理多个span。它适用于需要多个颜色的情况。您所需要做的就是将一个多色SVG导入IcoMoon。它会处理剩下的。下面是它的输出演示：https://codepen.io/Keyamoon/pen/vXxJgq
使用icomoon创建多色图标字体相当容易，但它将多个字形组合在一起，而且似乎不知道"默认"颜色（可以从父类更改的颜色），因此我们需要在CSS中将其定义为inherit：
1） 使用您喜爱的矢量应用程序（如Inkscape或Adobe Illustrator）创建SVG。
重要提示：Icomon（以及其他任何东西）将为SVG中的每个颜色的路径使用一个字形，因此请确保使用相同颜色连接路径，并且不要使用太多颜色…
Illustrator使连接复合路径变得容易：https://www.youtube.com/watch?v=jbc3q9bfOH8和连接对象：https://graphicdesign.stackexchange.com/questions/999/how-do-i-combine-two-objects-into-one-in-illustrator…
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个SVG。图标中的两种颜色各一种，并将它们作为两个不同的字符添加到字体中。（示例中为\e006和\e007）
然后使用:before选择器和:after选择器添加使用不同颜色的字符。每个选择器都使用不同的字符和不同的颜色。
letter-spacing: -1导致字符重叠。
我以他们的jsfiddle为例，并将其修复为使用字体真棒：http://jsfiddle.net/p44zf3se/
更新
我不知道为什么我之前的回答不够，但这里是另一个例子。我无法将其上传到jsfiddle，因为无法从其他网站提供字体。因此，只需使用下面的html+从以下位置下载免费的IcoMoon字体：http://github.com/Keyamoon/IcoMoon-Free/raw/master/Font/IcoMoon-Free.ttf
<html>
<head>
<style>
@font-face {
font-family: 'IcoMoon-Free';
src: url('IcoMoon-Free.ttf') format('truetype');
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.facebook-icon {
font-family: 'IcoMoon-Free';
}
.facebook-icon:after {
content:"ea8e";
color:#F33;
font-size:6em;
}
.facebook-icon:before {
content:"ea8c";
color:#0C0;
font-size:6em;
letter-spacing:-0.5em;
}
</style>
</head>
<body>
<div class="facebook-icon"></div>
</body>
</html>
解决方案1：不使用字体
你还没有说太多你实际在做什么。建立一个网站？客户在网站的内容管理系统中编辑图标的web界面？我猜。
这听起来像是你考虑字体太复杂了。它们通常是单色动物。通常
为什么不直接使用SVG呢？您可以轻松地在Javascript中构建或加载一个，并从Javascript中进行编辑；有很多在线演示，我在这里提供了另一个。换两种颜色是很琐碎的。
这里有一种在页面中构建SVG的快速方法，甚至可以将其作为独立文件下载：
<!DOCTYPE html>
<html><head>
<title>Chess SVG Builder</title>
<script type="text/javascript">
window.addEventListener("load", function() {
// Draw board
var svg = document.getElementsByTagName("svg")[0],
sz = Math.min(svg.clientWidth, svg.clientHeight),
sqr = sz / 11, smSqr = sqr / 2,
xSmO = (svg.clientWidth - sz) / 2, ySmO = (svg.clientHeight - sz) / 2,
xO = (svg.clientWidth - 8 * sqr) / 2, yO = (svg.clientHeight - 8 * sqr) / 2;
svg.innerHTML = "";
for (var x = 0; x < 22; x++) for (var y = x % 2; y < 3; y += 2)
svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
for (var x = 0; x < 3; x++) for (var y = x % 2; y < 19; y += 2)
svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
for (var x = 19; x < 22; x++) for (var y = x % 2; y < 19; y += 2)
svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
for (var x = 0; x < 22; x++) for (var y = 20 - x % 2; y < 22; y += 2)
svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
for (var x = 0; x < 8; x++) for (var y = 1 - x % 2; y < 8; y += 2)
svg.innerHTML += '<rect x="' + (xO + sqr * x) + '" y="' + (yO + sqr * y) + '" width="' + sqr + '" height="' + sqr + '" style="fill:#700;" />';
svg.innerHTML += '<rect x="' + xO + '" y="' + yO + '" width="' + 8 * sqr + '" height="' + 8 * sqr + '" style="fill:none; stroke-width:1; stroke:#000;" />';
// Print pieces
svg.style.fontSize = sqr + "px";
var numInstances = [1, 1, 2, 2, 2, 8],
horz = [4, 3, 0, 7, 2, 5, 6, 1],
pieceNum = 0;
for (var code = 12; code < 24; code++)
for (var lp = 0; lp < numInstances[code % 6]; lp++) {
var pN = pieceNum % 16;
var x = xO + sqr * (0.5 + (Math.floor(pieceNum / 8) % 2 == 0 ? horz[pieceNum % 8] : pieceNum % 8)),
y = yO + sqr * (0.9 + 7 * (1 - Math.floor(pieceNum / 16)) - Math.floor((pieceNum % 16) / 8) * (1 - 2 * Math.floor(pieceNum / 16)));
svg.innerHTML += '<text x="' + x + '" y="' + y + '" text-anchor="middle">b' + code + '</text>';
pieceNum++;
}
// Make downloadable
var serializer = new XMLSerializer(),
source = serializer.serializeToString(svg);
if (!source.match(/^<svg[^>]+xmlns="http://www.w3.org/2000/svg"/))
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
if (!source.match(/^<svg[^>]+"http://www.w3.org/1999/xlink"/))
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
source = '<?xml version="1.0" standalone="no"?>' + source;
document.getElementsByTagName("a")[0].href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
});
</script>
</head><body>
<svg width="550" height="550">
</svg><br />
<a>Download as a file</a>
</body></html>正如你所看到的，我确实对构建多色字体感兴趣。我希望我的棋子在计算机上保留它们的语义，所以我从9812开始用Unicode字符"书写"它们。如果你的显示器的字体和我的一样，你会看到单色的碎片，里面有空隙；模拟第二种颜色是一种粗糙的尝试；红色方块会干扰棋子的外观，因此无法读取国际象棋的位置。
在我自己的展示中，红色方块上的"白色"碎片实际上里面没有一点白色；因此，我不认为我在挑剔，在这里。。。我认为要求白人国王应该是白人是公平的。
解决方案2：使用字体
仍然使用SVG来定义字体，但需要更多的手动阅读。
SVG字体不允许在一个字形中使用多种颜色吗？我不确定确切的继承规则，这似乎与您有关。阅读和实验？
w3c字形规范
如果我已经理解了我所读到的内容，那么从css更改长度类型的值可能会令人困惑，因为在按需要定义的字形上，它实际上会使用字形的本地坐标系（？）但颜色应该是安全的。
我以后可能会有一些代码示例，只要我自己了解这一点。我认为这可能涉及到从Javascript更改SVG；我无法想象CSS能够控制这样一个定制字体的所有颜色。在我看来，"inherit"是用于默认颜色的属性，而字形中使用的其他颜色则需要JS？也许以后我知道的时候会在这里更多。