我想自己创建一个图标字体。 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/