使用 IcoMoon 创建多色对抗

Question

我上传了一个 svg 到 Icomoon 以便它可以生成 icofonts。它是一个多色 icofont，在 css 文件中有 9 个不同的路径。

这个icofont的代码在我的css中如下：

.icon-accordance_logo  {
  font-size:5em
}

.icon-accordance_logo .path1:before {
  content: "\e900";
  color: rgb(7, 59, 75);
}
.icon-accordance_logo .path2:before {
  content: "\e901";
  margin-left: -1.0498046875em;
  color: rgb(7, 59, 75);
}
.icon-accordance_logo .path3:before {
  content: "\e902";
  margin-left: -1.0498046875em;
  color: rgb(7, 59, 75);
}
.icon-accordance_logo .path4:before {
  content: "\e903";
  margin-left: -1.0498046875em;
  color: rgb(7, 59, 75);
}
.icon-accordance_logo .path5:before {
  content: "\e904";
  margin-left: -1.0498046875em;
  color: rgb(7, 59, 75);
}
.icon-accordance_logo .path6:before {
  content: "\e905";
  margin-left: -1.0498046875em;
  color: rgb(7, 59, 75);
}
.icon-accordance_logo .path7:before {
  content: "\e906";
  margin-left: -1.0498046875em;
  color: rgb(233, 72, 112);
}
.icon-accordance_logo .path8:before {
  content: "\e907";
  margin-left: -1.0498046875em;
  color: rgb(22, 139, 179);
}
.icon-accordance_logo .path9:before {
  content: "\e908";
  margin-left: -1.0498046875em;
  color: rgb(81, 183, 149);
}
.icon-accordance_logo .path10:before {
  content: "\e909";
  margin-left: -1.0498046875em;
  color: rgb(254, 209, 104);
}

我想用这个 icofont 作为页面背景。这是我使用的代码：

body:after{
  font-family: icomoon;
  content: "\e900"; //This is the issue
  font-size: 20em;
  text-shadow: 2px 2px #ff0000;
  z-index:10000;
}

内容属性仅来自一个路径。我如何插入所有其他路径，这是否可能？因为我知道如果使用这个 twitter icofont:

.icon-twitter:before {
  content: "\e600";
}

然后将其用作页面背景，如下所示：

body:after{
  font-family: icomoon;
  content: "\e600";
  font-size: 20em;
  text-shadow: 2px 2px #ff0000;
  z-index:10000;
}

它工作得很好。那么如何让多路径的多色icofont作为页面背景呢？

brgds, 苏海尔

Answer 1

1) 当你只有 3 种颜色时，你不应该有 9 条路径！

2) 通过加入所有 rgb(7, 59, 75);

你应该只有 3 条路径

3) 每个路径是一个字形 ("letter")。但是你只能设置 :before 和 :after 的样式，所以只能用两种颜色，不能用三种。

在这里查看我的回答，它包含一个工作演示：

当你真的想要 3 种颜色时，你可以考虑将一个额外的元素作为 body 的第一个子元素 with

position: fixed;
pointer-events: none;

顺便说一句：你的 z-index: 1000; 很糟糕。

使用 IcoMoon 创建多色对抗

Create multi-color confront with IcoMoon

css

svg

glyphicons