创建多色图标。爱可梦答案

【问题标题】：create multicolor icons. Icomoon创建多色图标。爱可梦
【发布时间】：2015-10-27 15:15:09
【问题描述】：

很难找到有关如何创建具有两种颜色的图标（facebook - 白色和蓝色-，google- 白色和红色......）的任何明确信息。客户希望能够随意更改这两种颜色。我一直在环顾四周，我发现只有http://www.programask.com/question_41701651_multicolored-icon-fonts# 对于客户的目的来说似乎很简单明了（当他们想要改变颜色时，但我不明白这个过程......）。

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

所以我知道我需要一个图像编辑器，如果是 facebook 图标，我选择“f”并将其保存在 .svg 中，然后与背景相同但“没有 f”，然后保存它svg 也可以，但是....我如何将它们放在一起以仅引用一个图标？

虽然我不需要使用 icomoon（但我需要免费软件），但是有人可以解释我如何通过 css 为图标着色吗？

谢谢

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么引发讨论，因此与 Stack Overflow 无关
css-tricks.com/using-svg
什么意思？这是我在使用 css 时遇到的问题！！！！！！！我正在尝试为通过 icomoon 创建的图标着色，而我只能绘制“背景”，我一直在尝试在谷歌上找到如何创建两个彩色 svg 图标，除了我添加的链接之外我找不到任何东西，我认为这是不完整的。为什么它不是 Stack Overflow 的主题？
感谢您的链接。虽然....这是错误的。我不能用那种方式，因为我的主管说这是错误的，而且是一个坏习惯，我应该使用没有背景图像的颜色路径....
你读得不够远。

标签： css icons

【解决方案1】：

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

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-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，它使用一种 2 色字体，仅用于一个可以更改颜色的元素……

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您提供的链接中的示例非常清楚。您创建 2 个 SVG。图标中的 2 种颜色中的每一种，并将它们作为两个不同的字符添加到字体中。（示例中为 \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>

【讨论】：

是的，是的，我已经使用了它的 jsfiddle，我看到了它是如何工作的，但我不明白 icomoon 上的程序。所以就像我说的例子。我想做一个 facebook 图标。我将“f”保存在一个svg中，并将背景保存在另一个svg中（“f”的间隙）。但是，如果我将它们上传到 icomoon，它们会显示为不同的图标，不是吗？或者我应该这样做，然后，一旦我下载了生成的文件，我就创建了“facebook”图标？
Icomoon 无法创建多色图标
字体始终为单色。 facebook 类的样式（使用 :before 和 :after）包含 2 个字母。每一个都有不同的颜色。您可以在某处上传您的 svgs 或输出 woff 文件，我将更新示例以使用它。

【解决方案4】：

解决方案 1：不使用字体

你没有说太多关于你实际在做什么。建立网站？客户在网站的内容管理系统中编辑图标的 Web 界面of？我猜。

听起来您完全考虑字体使事情变得过于复杂。它们通常是单色动物。通常。

为什么不直接使用 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">&#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>

如您所见，我确实对构建多色字体很感兴趣。我希望我的棋子保留它们对计算机的语义，所以我从 9812 开始用 Unicode 字符“写”它们。如果你的显示器的字体和我的一样，你会看到单色的部分有间隙；这是模拟第二种颜色的粗略尝试；红色方块会干扰棋子的外观，并且棋子位置将无法读取。

在我的显示器上，红色方块上的“白色”棋子实际上没有任何地方有白色斑点；所以我不认为我在吹毛求疵，在这里...我认为要求白国王应该是白的是公平的。

解决方案 2：使用字体

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

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

w3c glyph spec

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

以后我可能会得到一些代码示例，只要我自己解决这个问题。我认为这可能涉及从 Javascript 更改 SVG；我无法想象 CSS 能够控制这种自定义字体的所有颜色。在我看来，“继承”可能是用于默认颜色的属性，而字形中使用的其他颜色需要 JS？当我知道的时候，也许稍后会在这里更多。

【讨论】：