icomoon 创建了一个包含多个 类 的符号
icomoon creates one symbol with many classes
我想自己创建一个图标字体。我在 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 上创建字体时，我得到一个带有以下两个 class 的 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 为这个符号创建了两个 classes。但我只希望它是一个包含符号所有元素的 class 。我怎样才能做到这一点？
您的 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>
我想自己创建一个图标字体。我在 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 上创建字体时，我得到一个带有以下两个 class 的 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 为这个符号创建了两个 classes。但我只希望它是一个包含符号所有元素的 class 。我怎样才能做到这一点？
您的 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>