Search code examples
csssvgglyphicons

Create multi-color confront with IcoMoon

I uploaded a svg to Icomoon so it could generate icofonts. Its a multi-color icofont with 9 different paths to in the css file.

The code for this icofont is the following in my 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);
}

I want to use this icofont a page background. This is the code I am using:

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

The content attribute is only from one path. How do I insert all the other paths and is it at all possible? Because I know if use this twitter icofont:

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

and then use it as a page background with the following:

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

It works just fine. So how then to make a multi-colored icofont with multiple paths work as page background?

brgds, Sohail

Solution

  • 1) You should not have 9 pathes when you have only 3 colors !

    2) You should only have 3 pathes by joining all the rgb(7, 59, 75);

    3) Each path is one glyph ("letter"). But you can only style :before and :after and so it is only possible with two colors, not with three.

    See my answer here, it contains a working demo : https://stackoverflow.com/a/39557217/1008547

    When you really want 3 colors, you could think of an extra element as the first-child of body with

    position: fixed;
pointer-events: none;

    And btw: Your z-index: 1000; is pretty bad.