I want to create on my own an icon-font. I have the following symbol in svg: symbol The code looks like this:
<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>
When creating the font on icomoon.io, I get a style.css with the following two classes:
.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);
}
So, icomoon created for this one symbol TWO classes. But I only want it to be one class that contains all elements of the symbol. How can I accomplish this?
You have two different elements in your SVG, a white fill and a black stroke, so Icomoon is trying to be helpful and replicate this for you. I suppose you don't need the white fill, here's the cleaned-up SVG, you can simply save into a textfile with the svg extension and then upload to 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>