Question

由于我使用过Icon字体，因此在一个类中使用两种颜色而不是一堆定位或剪辑是一个很大的问题..因为在一个网站中有多色图标是相当普遍的事情，所以我来到了对面今天的解决方案我想我可能只是为那些寻找答案但却发现并发症的人发布这个...

Answer 1

好的，我将逐步完成这项工作：

ILLUSTRATOR PART

将图标复制到新文档中。
然后剪掉一种颜色。
按另存为并保存为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及以上，然后是我检查过的所有其他内容..

多彩多姿的图标字体

1 个答案: