Converting SVG to webfont icon is creating lots of paths

[toolman]

Hi there,

I have an SVG in Illustrator. When I convert it to a webfont icon using icomoon, it creates a lot of CSS paths, for example:

.icon-friendly .path1:before {
  content: "\e96f";
  color: rgb(0, 0, 0);
}
.icon-friendly .path2:before {
  content: "\e970";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-friendly .path3:before {
  content: "\e971";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-friendly .path4:before {
  content: "\e972";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-friendly .path5:before {
  content: "\e973";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-friendly .path6:before {
  content: "\e974";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
..... etc

Is there a way to stop it creating all these paths and just have a single icon CSS? I guess there must be something I need to do in Illustrator?

Thanks

[coothead]

Hi there toolman,

if members had the actual svg in question, then they might
be better able to offer suggestions or even solutions.

coothead

[toolman]

family-friendly.zip (1.3 KB)

Hi,

I’ve attached the icon in question.

[coothead]

Hi there toolman,

I tried to convert your svg to web fonts at fontello,
but it would not accept it…

I tried replacing the “style” and “class” with fill" but
then it would not accept “fill” and “circle”.

coothead

[toolman]

Hi,

I see, that’s strange. Do you know id there is a way of “flattening” the SVG somehow in Illustrator and then export it as an icon?

Thanks?

[coothead]

Hi there toolman,

SVG is not really my forte.

Fontello gave this advice…

Please convert to a compound path manually

…which may or may not help.

coothead

[coothead]

Hi there toolman,

I managed to convert the SVG “circle elements” to
“path elements” and removed two “path elements”
that had the attribute fill=“#ffffff”.

This then allowed the SVG file to then be converted
into the required web fonts using… icomoon.

You can find a working example and the relevant files
in the attachment.

toolman.zip (6.0 KB)

coothead

[toolman]

Thanks it worked. However, do you know how to do this in Illustrator rather than the code?

Thanks

[coothead]

[quote=“toolman, post:8, topic:263047”]“do you know how to do this in Illustrator rather than the code?”
[/quote]
No and yes - and

No, I do not have “Illustrator”.

Yes, a quick search gave me these instructions…

How to covert a < circle > to a < path > in Illustrator

No having “Illustrator”, I did it online here…

SVG Circle/Ellipse to Path Converter

…and then amended your “family-friendly.svg” file.

I trust that this will help.

coothead