icomoon icon font multi color











up vote
0
down vote

favorite












I using icomoon to generate colors icons, but it combines them from multiple glyphs off course, anyway can combines the spans to 1 only?



Because I will get data output in html and every row have a icon,
and max character span number is 20, every row have 20 span html DOM is too big. any solution or anyway software can convert color icon but only 1 class?






.icon-test .path1:before {

  content: "e906";

  color: rgb(144, 144, 144);

}

.icon-test .path2:before {

  content: "e907";

  margin-left: -1em;

  color: rgb(255, 255, 255);

}

.icon-test .path3:before {

  content: "e908";

  margin-left: -1em;

  color: rgb(252, 168, 57);

}

.icon-test .path4:before {

  content: "e909";

  margin-left: -1em;

  color: rgb(96, 175, 221);

}

.icon-test .path5:before {

  content: "e90a";

  margin-left: -1em;

  color: rgb(0, 188, 173);

}

<span class="icon-test">

  <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span>

</span>








html css web icons imageicon







share|improve this question




























    up vote
    0
    down vote

    favorite












    I using icomoon to generate colors icons, but it combines them from multiple glyphs off course, anyway can combines the spans to 1 only?



    Because I will get data output in html and every row have a icon,
    and max character span number is 20, every row have 20 span html DOM is too big. any solution or anyway software can convert color icon but only 1 class?






    .icon-test .path1:before {
    
  content: "e906";
    
  color: rgb(144, 144, 144);
    
}
    
.icon-test .path2:before {
    
  content: "e907";
    
  margin-left: -1em;
    
  color: rgb(255, 255, 255);
    
}
    
.icon-test .path3:before {
    
  content: "e908";
    
  margin-left: -1em;
    
  color: rgb(252, 168, 57);
    
}
    
.icon-test .path4:before {
    
  content: "e909";
    
  margin-left: -1em;
    
  color: rgb(96, 175, 221);
    
}
    
.icon-test .path5:before {
    
  content: "e90a";
    
  margin-left: -1em;
    
  color: rgb(0, 188, 173);
    
}

    <span class="icon-test">
    
  <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span>
    
</span>








    html css web icons imageicon







    share|improve this question


























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I using icomoon to generate colors icons, but it combines them from multiple glyphs off course, anyway can combines the spans to 1 only?



      Because I will get data output in html and every row have a icon,
      and max character span number is 20, every row have 20 span html DOM is too big. any solution or anyway software can convert color icon but only 1 class?






      .icon-test .path1:before {
      
  content: "e906";
      
  color: rgb(144, 144, 144);
      
}
      
.icon-test .path2:before {
      
  content: "e907";
      
  margin-left: -1em;
      
  color: rgb(255, 255, 255);
      
}
      
.icon-test .path3:before {
      
  content: "e908";
      
  margin-left: -1em;
      
  color: rgb(252, 168, 57);
      
}
      
.icon-test .path4:before {
      
  content: "e909";
      
  margin-left: -1em;
      
  color: rgb(96, 175, 221);
      
}
      
.icon-test .path5:before {
      
  content: "e90a";
      
  margin-left: -1em;
      
  color: rgb(0, 188, 173);
      
}

      <span class="icon-test">
      
  <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span>
      
</span>








      html css web icons imageicon







      share|improve this question















      I using icomoon to generate colors icons, but it combines them from multiple glyphs off course, anyway can combines the spans to 1 only?



      Because I will get data output in html and every row have a icon,
      and max character span number is 20, every row have 20 span html DOM is too big. any solution or anyway software can convert color icon but only 1 class?






      .icon-test .path1:before {
      
  content: "e906";
      
  color: rgb(144, 144, 144);
      
}
      
.icon-test .path2:before {
      
  content: "e907";
      
  margin-left: -1em;
      
  color: rgb(255, 255, 255);
      
}
      
.icon-test .path3:before {
      
  content: "e908";
      
  margin-left: -1em;
      
  color: rgb(252, 168, 57);
      
}
      
.icon-test .path4:before {
      
  content: "e909";
      
  margin-left: -1em;
      
  color: rgb(96, 175, 221);
      
}
      
.icon-test .path5:before {
      
  content: "e90a";
      
  margin-left: -1em;
      
  color: rgb(0, 188, 173);
      
}

      <span class="icon-test">
      
  <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span>
      
</span>








      .icon-test .path1:before {
      
  content: "e906";
      
  color: rgb(144, 144, 144);
      
}
      
.icon-test .path2:before {
      
  content: "e907";
      
  margin-left: -1em;
      
  color: rgb(255, 255, 255);
      
}
      
.icon-test .path3:before {
      
  content: "e908";
      
  margin-left: -1em;
      
  color: rgb(252, 168, 57);
      
}
      
.icon-test .path4:before {
      
  content: "e909";
      
  margin-left: -1em;
      
  color: rgb(96, 175, 221);
      
}
      
.icon-test .path5:before {
      
  content: "e90a";
      
  margin-left: -1em;
      
  color: rgb(0, 188, 173);
      
}

      <span class="icon-test">
      
  <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span>
      
</span>





      .icon-test .path1:before {
      
  content: "e906";
      
  color: rgb(144, 144, 144);
      
}
      
.icon-test .path2:before {
      
  content: "e907";
      
  margin-left: -1em;
      
  color: rgb(255, 255, 255);
      
}
      
.icon-test .path3:before {
      
  content: "e908";
      
  margin-left: -1em;
      
  color: rgb(252, 168, 57);
      
}
      
.icon-test .path4:before {
      
  content: "e909";
      
  margin-left: -1em;
      
  color: rgb(96, 175, 221);
      
}
      
.icon-test .path5:before {
      
  content: "e90a";
      
  margin-left: -1em;
      
  color: rgb(0, 188, 173);
      
}

      <span class="icon-test">
      
  <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span>
      
</span>





      html css web icons imageicon




      html css web icons imageicon






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited yesterday

























      asked Nov 22 at 3:07









      user7006658

      13




      13





























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423306%2ficomoon-icon-font-multi-color%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423306%2ficomoon-icon-font-multi-color%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Catalogne

          Image
          Pour les articles homonymes, voir Catalogne (homonymie). Ne doit pas être confondu avec Pays catalans. Cet article concerne un événement récent ou en cours. Ces informations peuvent manquer de recul, ne pas prendre en compte des développements récents ou changer à mesure que l’événement progresse. Le titre lui-même peut être provisoire. N’hésitez pas à l’améliorer en veillant à citer vos sources . La dernière modification de cette page a été faite le 30 décembre 2018 à 18:00. Catalogne Catalunya (ca) Catalonha (oc) Cataluña (es) .mw-parser-output .entete.map{background-image:url("//upload.wikimedia.org/wikipedia/commons/7/7a/Picto_infobox_map.png")} Armoiries Drapeau Administration Pays   Espagne Capitale Barcelone 41° 23′ N, 2° 11′ E Statut d'autonomie 9 septembre 1932 19 septembre 1979, modifié le 19 juin 2006 Sièges au Parlement 47 députés 24 (16 élus et 8 désignés) sénateurs Présiden...
          Read more

          Violoncelliste

          Image
          Cet article est une ébauche concernant un musicien. Vous pouvez partager vos connaissances en l’améliorant ( comment ? ) selon les recommandations des projets correspondants. Un violoncelliste jouant un air de tango dans une rue de Buenos Aires. En musique, un violoncelliste est un musicien instrumentiste jouant du violoncelle. Voir aussi | Catégorie:Violoncelliste Catégorie:Violoncelliste classique Portail de la musique Portail de la musique classique This page is only for reference, If you need detailed information, please check here
          Read more

          Héron pourpré

          Image
          .mw-parser-output h1 #sous_titre_h1{display:block;font-size:0.7em;line-height:1.3em;margin:0.2em 0 0.1em 0.5em} Ardea purpurea Ardea purpurea Ardea purpurea - Tarn Classification (COI) Règne Animalia Embranchement Chordata Sous-embr. Vertebrata Classe Aves Ordre Pelecaniformes Famille Ardeidae Genre Ardea Nom binominal Ardea purpurea Linnaeus, 1766 Répartition géographique     ////   zone de nidification     ////   résident permanent     ////   non nicheur Statut de conservation UICN LC  : Préoccupation mineure Le Héron pourpré ( Ardea purpurea Linnaeus, 1766) est une espèce d'oiseaux de la famille des Ardeidae. C'est un oiseau migrateur présent et nicheur en Europe et Afrique du Nord, hivernant occasionnellement en Europe de l'Ouest et du sud, protégé. Chants et appels Enregistrement 1 : Enregistrement 2 : Écouter le Héron pourpré sur xeno-canto Sommaire 1 Description...
          Read more