创建多色图标。图标

Question

很难找到任何关于如何创建具有两种颜色的图标（facebook -白色和蓝色-，google- 白色和红色......）的明确信息。客户希望能够随心所欲地更改这两种颜色。我一直在四处寻找，只发现 http://www.programask.com/question_41701651_multicolored-icon-fonts# 这对于客户的目的来说似乎非常简单和清晰（他们需要时可以更改颜色，但我不明白该过程...）。

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

所以我知道我需要一个图像编辑器，对于 facebook 图标，我 select "f" 并将其保存在 .svg 中，然后与背景相同，但 "without the f"，我也将它保存为 svg，但是......我如何将它们放在一起以仅引用一个图标？

虽然我不需要用 icomoon 来做（但我需要免费软件），但是有人能解释一下如何通过 css 给图标上色吗？

谢谢

Answer 1

您提供的 link 中的示例非常清楚。您创建了 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 2

用 icomoon 创建彩色图标字体相当容易，但它当然会从多个字形中组合它们，而且似乎不知道 "default" 颜色（可以从父 [=49 更改的颜色） =]) - 所以我们需要在 CSS 中将其定义为 inherit :

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

重要提示：Icomoon（和其他任何东西）将对 SVG 中的每个彩色路径使用一个字形，因此请确保加入具有相同颜色的路径并且不要使用太多颜色……

Illustrator 可以轻松加入复合路径：https://www.youtube.com/watch?v=jbc3q9bfOH8 and to join objects: https://graphicdesign.stackexchange.com/questions/999/how-do-i-combine-two-objects-into-one-in-illustrator …

2) 制作你的 icomoon 字体。

3) 在 CSS 中确定您的 "default" 颜色 - 假设它是 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 色字体，仅使用一个元素，您可以在其中更改颜色……

Answer 3

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

Answer 4

解决方案 1：不使用字体

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

听起来您根本就没有考虑字体，这让事情过于复杂了。它们通常是单色动物。通常。

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

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

在我自己的显示器上，'white' 红色方块上的碎片实际上在它们内部的任何地方都没有白色斑点；所以我不认为我在吹毛求疵，在这里...我认为要求白王应该是白人是公平的。

解决方案 2：使用字体

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

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

w3c glyph spec

如果我理解我正在阅读的内容，从 css 更改长度类型的值可能会造成混淆，因为在按您需要的方式定义的字形上，它实际上会使用字形的本地坐标系(?) 但是颜色应该是安全的。

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

创建多色图标。图标

create multicolor icons. Icomoon

css

icons