多彩多姿的图标字体答案

【问题标题】：Multicolored Icon Fonts多彩多姿的图标字体
【发布时间】：2013-07-13 21:09:04
【问题描述】：

由于我使用了图标字体，因此在一个类中使用两种颜色而不是一堆定位或剪辑是一个大问题。因为在网站中使用多色图标是很常见的事情，所以我遇到了今天的解决方案我想我可能会为像我这样寻找答案但只发现并发症的人发布这个......

【问题讨论】：

标签： html css fonts internet-explorer-8 font-face

【解决方案1】：

好的，我将一步一步地做到这一点：

插画部分

在 illustrator 中将图标复制到新文档中。
然后剪下一种颜色。
按另存为并另存为 SVG
然后粘贴您剪切的一个并删除另一个。
另存为 SVG。

ICOMOON

确实是一个很棒的网站。
启动应用程序。
导入 svg 并下载保存。

然后这是我用于多色字体图标的一类解决方案的 CSS：

CSS

.icon-earth{
        font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-earth:after {
    content: "\e006";
    color:#F33;
    font-size:6em;

}
.icon-earth:before {
    content: "\e007";
    color:#0C0;
    font-size:6em;
    letter-spacing:-1em;
}

HTML

<div class="icon-earth"></div>

它很容易根据您自己的需要解释 CSS，如果需要帮助，请大声喊叫，我也会一步一步完成...

最后这里是 JSFIDDLE，虽然我无法在 JsFiddle 中获得自定义图标字体...

浏览器支持是 IE8 及更高版本，然后是我检查过的所有其他内容..

【讨论】：

这仅适用于 2 色图标。但是如果我的图标有 3 种或更多颜色怎么办？？
嘿 @GilEpshtain 没想到那是 6 年前的倒叙，老实说，我现在只会使用 SVG，但如果图标字体是必须的，那么你可以遵循相同的过程，我想只使用一个以上html元素和绝对定位。但我当时的要求是幸好只有 2 种颜色。
我不能使用相同的过程，因为只有两个位置可以插入颜色:before 和:after。
@GilEpshtain 这就是为什么我提到使用超过 1 个具有绝对定位的 html 元素：<div class="icon-earth"><div class="inner-earth-icon"></div></div> 你可以在 4 个地方插入颜色。