我想自己创建一个图标字体。 svg中包含以下符号:symbol
代码如下:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="svg4986"
   x="0px"
   y="0px"
   viewBox="179 -180.3 84.900001 48.335998"
   xml:space="preserve"
   inkscape:version="0.91 r13725"
   sodipodi:docname="flieger.svg"
   width="84.900002"
   height="48.335999"><metadata
     id="metadata4153"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs4151" /><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1018"
     id="namedview4149"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:zoom="1.702"
     inkscape:cx="229.2"
     inkscape:cy="47.000013"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="g4144" /><style
     type="text/css"
     id="style4137">
    .st0{fill:#FFFFFF;}
</style><g
     id="g4144"
     transform="translate(-20.8,-248.664)"><path
       id="path3545_1_"
       class="st0"
       d="m 201.7,79.5 c 9.8,11 19.1,22.2 28.8,33 1.5,1.7 4.6,3.2 6.6,2.7 13.9,-4.4 27.6,-9.5 43.5,-15.1 -20,-9.5 -38.3,-17.6 -55.9,-27.1 -9,-4.9 -14.9,-3.9 -20.5,3.7 -0.8,0.8 -1.5,1.5 -2.5,2.8 z"
       inkscape:connector-curvature="0"
       style="fill:#ffffff" /><path
       d="m 236.3,116.7 c -2.5,0 -5.5,-1.6 -6.9,-3.3 -5.5,-6.1 -11,-12.4 -16.3,-18.6 -4.1,-4.7 -8.3,-9.6 -12.5,-14.4 l -0.8,-0.9 0.8,-1 c 0.5,-0.6 0.9,-1.1 1.3,-1.5 0.4,-0.5 0.8,-0.9 1.2,-1.4 6,-8.1 12.7,-9.3 22.4,-4.1 12.8,6.9 26,13.1 40,19.6 5.2,2.4 10.5,4.9 15.9,7.5 l 3.3,1.6 -3.4,1.2 c -4.3,1.5 -8.4,3 -12.3,4.4 -10.8,3.9 -21,7.5 -31.2,10.8 -0.6,0.1 -1,0.1 -1.5,0.1 z M 203.7,79.4 c 4,4.5 7.9,9 11.7,13.5 5.3,6.1 10.7,12.5 16.2,18.5 1.2,1.4 3.8,2.6 5.1,2.2 10.1,-3.2 20.2,-6.8 31,-10.7 2.9,-1 5.9,-2.1 8.9,-3.2 -4.3,-2 -8.5,-4 -12.6,-5.9 -14,-6.5 -27.3,-12.7 -40.1,-19.7 -8.4,-4.6 -13.5,-3.7 -18.6,3.2 -0.4,0.6 -0.9,1.1 -1.3,1.6 0,0.2 -0.2,0.4 -0.3,0.5 z"
       id="path4147"
       inkscape:connector-curvature="0" /></g></svg>


在icomoon.io上创建字体时,我得到带有以下两个类的style.css:

.icon-symbol .path1:before {
  content: "\e900";
  color: rgb(255, 255, 255);
}
.icon-symbol .path2:before {
  content: "\e901";
  margin-left: -1.7568359375em;
  color: rgb(0, 0, 0);
}


因此,icomoon为此符号创建了两个类。但我只希望它成为包含该符号所有元素的一类。我该怎么做?

最佳答案

SVG中有两个不同的元素,一个白色填充和一个黑色笔划,因此Icomoon试图提供帮助并为您复制此元素。我想您不需要白色填充,这是清理后的SVG,您可以将其保存为扩展名为svg的文本文件,然后上传至Icomoon:

<svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="179 -180.3 84.900001 48.335998">

  <g transform="translate(-20.8,-248.664)">
    <path d="m 236.3,116.7 c -2.5,0 -5.5,-1.6 -6.9,-3.3 -5.5,-6.1 -11,-12.4 -16.3,-18.6 -4.1,-4.7 -8.3,-9.6 -12.5,-14.4 l -0.8,-0.9 0.8,-1 c 0.5,-0.6 0.9,-1.1 1.3,-1.5 0.4,-0.5 0.8,-0.9 1.2,-1.4 6,-8.1 12.7,-9.3 22.4,-4.1 12.8,6.9 26,13.1 40,19.6 5.2,2.4 10.5,4.9 15.9,7.5 l 3.3,1.6 -3.4,1.2 c -4.3,1.5 -8.4,3 -12.3,4.4 -10.8,3.9 -21,7.5 -31.2,10.8 -0.6,0.1 -1,0.1 -1.5,0.1 z M 203.7,79.4 c 4,4.5 7.9,9 11.7,13.5 5.3,6.1 10.7,12.5 16.2,18.5 1.2,1.4 3.8,2.6 5.1,2.2 10.1,-3.2 20.2,-6.8 31,-10.7 2.9,-1 5.9,-2.1 8.9,-3.2 -4.3,-2 -8.5,-4 -12.6,-5.9 -14,-6.5 -27.3,-12.7 -40.1,-19.7 -8.4,-4.6 -13.5,-3.7 -18.6,3.2 -0.4,0.6 -0.9,1.1 -1.3,1.6 0,0.2 -0.2,0.4 -0.3,0.5 z"/>
  </g>
</svg>

关于css - icomoon创建具有多个类的符号,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39389353/

10-09 14:10