logo标签列表

创建多彩图标。Icomoon

cssicons
7
寻找如何创建具有两种颜色的图标（Facebook-白色和蓝色，Google-白色和红色等）的清晰信息非常困难。客户希望能够随意更改这两种颜色。我一直在寻找，只找到了http://www.programask.com/question_41701651_multicolored-icon-fonts#，似乎很容易且适合客户的目的（随时更改颜色），但我还没有理解其过程......。
我目前使用icomoon，但我找不到如何添加颜色......
因此我了解到需要一款图像编辑器，在Facebook图标的情况下，我选择“f”并将其保存为.svg文件，然后同样的操作对于背景但“没有f”，也保存为svg文件，但是然后...如何将它们放在一起引用一个图标？
虽然我不需要使用icomoon（但我需要免费软件），但有人可以解释一下如何通过CSS着色图标吗？
谢谢
这个问题要么太宽泛，要么基于观点，或者引发讨论，因此不适合在 Stack Overflow 上讨论。 - Paulie_D
https://css-tricks.com/using-svg/ - Paulie_D
你的意思是什么？这是我在CSS方面遇到的问题！！！我正在尝试通过icomoon创建的图标进行着色，但我只能涂“背景”，我一直在尝试在谷歌上找到如何创建双色SVG图标的方法，但除了我添加的链接外，我找不到任何东西，我认为它是不完整的。为什么这不是Stack Overflow的话题？ - eve_mf
谢谢你提供链接。虽然...它是错误的。我不能使用那种方式，因为我的主管说这是错误的和一个坏习惯，我应该使用彩色路径而不是背景图片... - eve_mf
你还没有读到足够的内容。 - Paulie_D
4个回答
6

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

5
使用icomoon创建多彩图标字体非常容易，但它将它们从多个字形组合在一起，并似乎不知道“默认”颜色（可以从父类更改的颜色）-因此我们需要在CSS中定义它为inherit：
1）使用您喜欢的矢量应用程序（如Inkscape或Adobe Illustrator）创建SVG。
重要提示：Icomoon（以及其他任何东西）将使用每个带有颜色路径的一个字形，因此请确保加入具有相同颜色的路径，并且不要使用太多颜色...
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个SVG。一个用于图标中的2种颜色之一，并将它们作为两个不同的字符添加到字体中。在示例中是(\e006和\e0007)。
然后，您可以使用:before选择器和:after选择器分别使用不同的颜色添加字符。每个选择器都使用不同的字符和不同的颜色。 letter-spacing: -1会导致字符重叠。
我使用了他们的jsfiddle示例并修复了它，使其能够与font awesome一起使用：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图标。我在一个svg中保存了“f”，在另一个svg中保存了背景（留出“f”的间隙）。但是，如果我将它们上传到icomoon上，它们会显示为不同的图标，对吗？还是我应该这样做，然后一旦我下载生成的文件，再创建“Facebook”图标？ - eve_mf
您无法使用Icomoon创建多彩图标。 - Paulie_D
字体始终是单色的。Facebook类被样式化（使用:before和:after）以包含2个字母，每个字母都有不同的颜色。您可以上传您的SVG或输出WOFF文件到某个地方，我将更新示例以使其与之配合。 - Igal S.
-1

解决方案1：不使用字体

您并没有详细说明您正在做什么。是在建立一个网站吗？还是为客户构建一个用于编辑网站内容管理系统中图标的Web界面？我猜测。

看起来您正在过度复杂化问题，考虑到字体。它们通常是单色动物。通常情况下。

为什么不直接使用SVG呢？您可以轻松地在JavaScript中构建或加载SVG，并从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>

正如您所看到的，我对构建多彩字体确实很感兴趣。我希望我的棋子在计算机中保留其语义含义，因此我使用从Unicode字符9812开始的字符来“编写”它们。如果您的显示器字体与我的相似，您将看到具有间隙的单色棋子；这是模拟第二种颜色的粗略尝试；红色方块会干扰棋子的外观，而棋局将无法阅读。

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

解决方案2：使用字体

仍然使用SVG定义字体，但需要更多手动阅读。

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

w3c字形规范

如果我理解正确，从CSS更改长度类型的值可能会令人困惑，因为在定义所需的字形上，它实际上会使用字形的本地坐标系（？）但颜色应该是安全的。

我以后可能会有一些代码示例，每当我自己进入这个领域时。我认为它可能涉及从Javascript修改SVG；我无法想象CSS能够控制如此定制字体的所有颜色。对于默认颜色，“inherit”似乎是要使用的属性，而在字形中使用的其他颜色则需要JS？也许稍后会有更多信息，等我了解了再说。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接