title: Create multi-color confront with IcoMoon
body: <p>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.</p>
  
  <p>The code for this icofont is the following in my css:</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>I want to use this icofont a page background. This is the code I am using:</p>
  
  <pre><code>body:after{
    font-family: icomoon;
    content: "\e900"; //This is the issue
    font-size: 20em;
    text-shadow: 2px 2px #ff0000;
    z-index:10000;
  } 
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>.icon-twitter:before {
    content: "\e600";
  }
  </code></pre>
  
  <p>and then use it as a page background with the following:</p>
  
  <pre><code>body:after{
    font-family: icomoon;
    content: "\e600";
    font-size: 20em;
    text-shadow: 2px 2px #ff0000;
    z-index:10000;
  }
  </code></pre>
  
  <p>It works just fine. So how then to make a multi-colored icofont with multiple paths work as page background?</p>
  
  <p>brgds,
  Sohail</p>