Question

很难找到关于如何使用两种颜色（facebook -white和blue-，google-white和red .....）创建图标的任何明确信息。客户希望能够随心所欲地改变这两种颜色。我一直在环顾四周，而且我发现http://www.programask.com/question_41701651_multicolored-icon-fonts#只是为了客户的目的而变得容易和清晰（在他们想要时改变颜色，但我还没有理解这个程序......）

我目前使用icomoon，但我无法找到如何添加颜色......

所以我明白我需要一个图像编辑器，如果是facebook图标，我选择＆＃34; f＆＃34;然后我把它保存在.svg然后和背景一样但是没有f＆＃34;并且我也把它保存到svg，但是然后....我怎么把它们放在一起引用一个图标？

我不需要用icomoon做这件事（但我需要免费软件），但有人可以解释一下如何通过css为图标上色吗？

谢谢

Answer 1

使用icomoon创建多色图标字体相当容易，但它将多个字形组合在一起，并且似乎不知道“默认”颜色（可以从父类更改的颜色） - 所以我们需要做在CSS中将其定义为inherit：

1）使用喜欢的矢量应用程序（如Inkscape或Adobe Illustrator）创建SVG。

重要提示：Icomoon（以及其他任何内容）将在SVG中为每个彩色路径使用一个字形，因此请确保使用相同颜色加入pathes并且不要使用太多颜色...

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">改变暗灰色......

这是一个有效的codepen，只有一个元素，只用一个元素就可以改变颜色...

Answer 2

您提供的链接中的示例非常清楚。您创建2个SVG。一个用于图标中的两种颜色，并将它们作为两个不同的字符添加到字体中。（示例中为\ e006和\ e0007）

然后使用: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>

Answer 3

IcoMoon本身生成用于堆叠字体字形的CSS。它不使用:before和:after（这是2种颜色的好解决方案）。相反，它使用多个span的更一般的方法。它适用于您想要多种颜色的情况。您需要做的就是将多色SVG导入IcoMoon。它将照顾其余部分。以下是其输出的演示：https://codepen.io/Keyamoon/pen/vXxJgq

Answer 4

解决方案1：不使用字体

你还没有多说你实际在做什么。建立一个网站？客户在网站内容管理系统中编辑图标的网络界面？我在猜测。

听起来你通过考虑字体来过度复杂化。它们通常是单色动物。一般

为什么不使用SVG？您可以在Javascript中轻松构建或加载一个，并从Javascript编辑它;有许多在线演示，我在这里提供了另一个。那么改变两种颜色将是非常微不足道的。

以下是在页面中构建SVG的快速方法，甚至可以将其作为独立文件下载：

＆＃13;
＆＃13;
<!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">&#98' + 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>
＆＃13;
＆＃13;
＆＃13;

如您所见，我确实对构建多色字体感兴趣。我希望我的棋子能够将它们的语义保留在计算机上，所以我写了＃39;他们使用9812以后的Unicode字符。如果您的显示器字体与我的一样，您会看到带有间隙的单色片;它是模拟第二种颜色的粗略尝试;红色正方形干扰了棋子的外观，国际象棋的位置是不可读的。

在我自己的显示屏上，＆＃39;白色＆＃39;红色方块上的碎片实际上并没有任何内部的白色斑点;因此，我不认为我在挑剔，在这里......我认为白王应该是白人是公平的。

解决方案2：使用字体

仍然使用SVG来定义字体，但会涉及更多的手动阅读。

不是SVG字体允许在一个字形中使用多种颜色？我不确定确切的继承规则，这似乎与您相关。阅读和实验？

w3c glyph spec

如果我已经理解了我正在阅读的内容，那么从css更改长度类型的值可能会让人感到困惑，因为在根据您需要的方式定义的字形上，它实际上会使用字形的本地坐标系（？）但颜色应该是安全的。

我可能会在以后自己有一些代码示例。我认为它可能涉及从Javascript改变SVG;我无法想象CSS能够控制这种自定义字体的所有颜色。在我看来，继承＆＃39;是用于默认颜色的属性，而字形中使用的其他颜色需要JS吗？在我知道的时候，或许以后更多。

创建多色图标。 Icomoon

4 个答案: