Geek Answers Handbook

Create multicolor icons. Icomoon

It was so hard to find clear information on how to create badges with two colors (facebook-white and blue, google-white and red .....). The client wants to change these two colors as he pleases. I look around and I only found http://www.programask.com/question_41701651_multicolored-icon-fonts# , which seems quiet and clear for the purpose of the client (change the color when they want, but I did not understand this procedure ... )

I am currently using icomoon, but I cannot find how to add colors ....

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

I don't need to do this with icomoon (but I need free software), but can someone explain to me how to colorize the icons via css?

thanks

+1
source share
4 answers

Creating multicolor icon fonts using icomoon is quite simple, but it combines them with a few glyphs from the course and does not seem to know about the standard color (the color that can be changed from the parent class) - so we need to define it as inherit in CSS:

1) Create your SVG files using your favorite vector application such as Inkscape or Adobe Illustrator.

Important: Icomoon (and something else) will use one character for each color path in SVG, so be sure to join templates with the same color and do not use too many colors ...

Illustrator simplifies combining composite patches: https://www.youtube.com/watch?v=jbc3q9bfOH8 and merging objects: https://graphicdesign.stackexchange.com/questions/999/how-do-i-combine-two-objects -into-one-in-illustrator ...

2) Create your icomoon font.

3) Define your default color in CSS - let's say it's rgb(62, 55, 60); :

In [class^="icon-"], [class*=" icon-"] { add

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

and delete every other line reading

 color: rgb(62, 55, 60);

or to explicitly change it to

 color: inherit;

What is it.

When I use only two colors (for example, dark and orange) that were correctly connected, I would never get more than two children in the icon, and I could change the dark graph from the root node <span class="icon-myIconName"> ...

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

+3
source

IcoMoon itself generates CSS for styling fonts. It does not use :before and :after (which is a good solution for two colors). Instead, it takes a more general approach with multiple span s. It works well when you want to have more than one color. All you have to do is import the multicolor SVG into IcoMoon. This will take care of the rest. Here's a demo: https://codepen.io/Keyamoon/pen/vXxJgq

+2
source

The example in the link you provided is pretty clear. You create 2 SVGs. One for each of the two colors in your icon and add them as two different characters to the font. (\ e006 and \ e0007 in the example)

Then you use the :before selector and the :after selector to add characters using different colors. Each selector uses a different character and a different color.

letter-spacing: -1 causes characters to overlap.

I took my jsfiddle example and fixed it to work with the font: http://jsfiddle.net/p44zf3se/

Update

I'm not sure why my previous answer was insufficient, but here is another example. I cannot load it in jsfiddle because the font cannot be served from another site. So just grab the html below + download the free IcoMoon font from: 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>
+1
source

Solution 1: Do not use a font

You have not talked much about what you are actually doing. Creating a website? Web interface for the client to edit the icon in the website content management system? I suppose.

You seem to be too complicated thinking about fonts in general. They are usually monochromatic animals. Usually.

Why not just use SVG? You can easily create or load it in Javascript and edit it from Javascript; There are many online demos, and I have provided one more here. Changing two colors would be pretty trivial.

Here is a quick way to create an SVG on a page and even suggest it to be downloaded as a separate file:

 <!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>

As you can see, I really have an interest in creating colorful fonts. I want my chess pieces to retain their semantic meaning for the computer, and therefore I have been writing them with Unicode characters since 9812. And if your screen font is similar to mine, you will see monochromatic fragments with spaces in them; it is a crude attempt to imitate a second color; red squares interfere with the pieces, and the chess position will be unreadable.

On its own display, the “white” shapes on the red squares do not actually have white spots inside them; so I don't think I'm nitpicking here ... I think it's fair to ask that the white king should be white.

Solution 2: Using the Font

Still use SVG to define the font, but much more manual reading will be involved.

Do SVG fonts allow multiple colors in a single character? I’m not sure of the correctness of inheritance rules, and this seems relevant to you. Read and experiment?

w3c glyph specification

If I understood what I was reading, changing the length values ​​from css can be confusing because the glyph is defined as you need, it would actually use the local glyph coordinate system (?) But the colors should be safe.

I may have some code samples later, whenever I myself am on it. I think this may affect the change of SVG from Javascript; I can’t imagine that CSS can control all the colors of such a custom font. It seems to me that "inherit" is a property to use for the default color, while other colors used in the glyph need JS? Maybe later when I know.

0
source

More articles:


All Articles