多彩的图标字体

Question

自从我使用图标字体以来，一个类别只能有两种颜色而不是一堆定位或剪辑，这一直是一个巨大的问题...因为在网站上拥有多彩的图标是相当常见的事情，今天我找到了解决办法，我想为像我一样寻找答案但只找到复杂性的人发布这篇文章...

- user1278673

Answer 1

好的，我会逐步说明：

ILLUSTRATOR 部分

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及以上版本以及其他所有我检查过的浏览器。

- user1278673

---

这只适用于两种颜色的图标。但是如果我的图标有三种或更多颜色呢？？ - Gil Epshtain

嘿 @GilEpshtain，没想到会回忆起6年前的事情，老实说现在我只会使用SVG，但如果必须使用图标字体，那么你可以遵循相同的过程，只需使用多个HTML元素和绝对定位即可。但是我当时的要求幸运地只有2种颜色。 - user1278673

我不能使用相同的过程，因为只有两个地方可以插入颜色:before和:after。 - Gil Epshtain

@GilEpshtain这就是为什么我提到使用多个具有绝对定位的HTML元素：“<div class =“icon-earth”> <div class =“inner-earth-icon”> </ div> </ div>”，这样您可以获得4个插入颜色的位置。 - user1278673