创建多色图标。 Icomoon [英] create multicolor icons. Icomoon

问题描述

很难找到任何明确的信息，如何创建两种颜色的图标（facebook-白色和蓝色，谷歌白色和红色.....）。客户希望能够随意改变这两种颜色。我一直在环顾四周，我发现只有 http://www.programask.com/question_41701651_multicolored -icon-fonts＃这似乎安静容易和清楚为客户目的（改变颜色，当他们想要，但我还没有理解程序...）。

It's been so hard to find any clear information about how to create icons with two colors (facebook -white and blue-, google- white and red.....). The customer wants to be able to change those two colors as he pleases. I have been looking around and I've found only http://www.programask.com/question_41701651_multicolored-icon-fonts# which seems quiet easy and clear for the client purpose (change the color when they want, but I haven't understood the procedure...).

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

I currently use icomoon, but I can't find how to add colors....

所以我知道我需要一个图像编辑器， case的facebook图标，我选择f，我保存在.svg然后相同的背景，但没有f，我保存它svg，但然后....如何我把

So I understood that I need an image editor, in case of facebook icon, I select the "f" and I save it in .svg and then the same with the background but "without the f", and I save it to svg too, but then.... how to I put them together to refer to just one icon?

我不需要用icomoon做（但我需要免费的软件），但是有人可以解释我如何

I don't need to do it with icomoon though (but I need free software), but can someone explain me how to color icons through css?

谢谢

推荐答案

字体与icomoon是相当容易，但它结合他们从多个字形离开过程，似乎不知道一个默认颜色（可以从父类改变的颜色） - 所以我们需要做它定义为继承

Creating multicolored icon fonts with icomoon is fairly easy but it combines them from multiple glyphs off course and seems to have no knowledge of a "default" color (the color which can be changed from the parent class) - so we need do define it as inherit in the CSS :

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

1) Create your SVGs with your favorite vector app like Inkscape or Adobe Illustrator.

重要提示：Icomoon（和其他任何东西）将在SVG中为每个彩色路径使用一个字形，因此请务必使用相同的颜色不要使用过多的颜色...

Important : Icomoon (and anything else) will use one glyph for each colored path in the SVG, so make sure to join the pathes with the same color and don't use too many colors …

Illustrator可以轻松加入复合图案： https://www.youtube.com/watch?v=jbc3q9bfOH8 并加入对象： http://graphicdesign.stackexchange.com/questions/999/how-do-i-combine-two-objects-into - in-illustrator ...

Illustrator makes it easy to join compound pathes : https://www.youtube.com/watch?v=jbc3q9bfOH8 and to join objects: http://graphicdesign.stackexchange.com/questions/999/how-do-i-combine-two-objects-into-one-in-illustrator …

2）制作您的icomoon字体。

2) Make your icomoon font.

在CSS中确定你的默认颜色 - 可以说 rgb（62，55，60）; ：

3) Determine your "default" color in the CSS - lets say it is rgb(62, 55, 60);:

[class ^ =icon-]，[class * =icon-] { add

/* default color */
color: rgb(62, 55, 60);

并删除每隔一行的行

color: rgb(62, 55, 60);

或明确更改为

color: inherit;

就是这样。

使用两种颜色（例如黑色和橙色）正确连接，我永远不会得到超过两个孩子的图标，我可以更改darkgrey从根节点< span class =icon-myIconName> ; ...

When I only use two colors (e.g. the darkgrey and orange) properly joined I would never get more than two children in the icon and I could change the darkgrey from the root node <span class="icon-myIconName"> ...

这里是一个工作 codepen ，只有一个元素可以更改颜色...

Here is a working codepen with a 2-color font used with only one element where you can change the color …

这篇关于创建多色图标。 Icomoon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！