多彩多姿的图标字体

Question

既然我已经使用图标字体,它是一个巨大的问题,有两种颜色用一个类,而不是一堆定位或剪裁..的,因为它是相当有在现场五彩的图标常见的事,我遇到了现在的解决方案我想我可能只是为那些寻找答案但却发现并发症的人发布这个...

Answer 1

好的,我将逐步完成这项工作:

ILLUSTRATOR PART

1. 在illustrator中将图标复制到新文档中.
2. 然后削减一种颜色.
3. 按另存为并保存为SVG
4. 然后粘贴你剪切的那个并删除另一个.
5. 另存为另一个SVG.

ICOMOON

1. 真的是一个很棒的网站.
2. 启动应用程序.
3. 导入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及以上,然后我检查的其他一切..