Can I output color icons?

[thybzi]

Web fonts do support colored glyphs (icomoon can produce such, for intstance). Via grunt-webfont, if I pass icon with fill color, it seems to be wiped off, and the glyph becomes black. Any possibility to have color icons with grunt-webfont?

[scottyeck]

The responsibility of this utility is to generate a font, and fonts are inherently colorless. This is also the same on Icomoon. In fact, the following is directly in their docs:

When you import an SVG image into the app, it gets parsed into a single layer and color.

Again, this utility's responsibility is to take vectors and turn them into font files. 👍 Including support for custom colors would likely extend the work of the utility beyond the realm of its responsibility.

Solutions! 😄

This can definitely be done with a little customization on your end. The easy solution, we're all aware, is to solve with CSS. 😉

.icon-success   { color: green;  }
.icon-error     { color: red;    }
.icon-warning   { color: yellow; }

That said, if you really wanted to get creative, this could also already be achieved by supplying a template. 😈 For example:

<%
var colorMap = {
    success: 'green',
    error: 'red',
    warning: 'yellow'
};
%>

<% for (var i = 0; i < glyphs.length i++) { %>

    <% var glyphName = glyphs[i]; %>

    .icon-<%= glyphName %> {
        content: "<%= codepoints[i] %>";

        <% if (colorMap[glyphName]) { %>
        color: <%= colorMap[glyphName %>;
        <% } %>
    }
<% } %>

This code isn't tested, but you get the idea. Cache a map of colors whose keys represent glyph names. Then, when iterating over each glyph to render its codepoint as before content, if it has an entry in the color map, set the color. 😇

Sorry for the delay. I'm going to close, but I hope you find this helpful. Please feel free to continue conversation here or to reach out to me directly with any additional questions. 😎

[sapegin]

@scottyeck Great reply! Thanks!