Converting SVG to font icon using icomoon

Question

I have an svg which when opened in any browser comes up fine. I am trying to convert a bunch of them to font icons using http://icomoon.io/ but it's not coming up correctly after importing. I tried using http://fontastic.me/ as well but no luck.

Here is the SVG Image markup -

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
    color: red;
">
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M323.41,321.664c0,0.457-0.371,0.828-0.828,0.828  H88.835c-0.458,0-0.829-0.371-0.829-0.828V87.918c0-0.459,0.371-0.829,0.829-0.829h233.747c0.457,0,0.828,0.37,0.828,0.829V321.664z  " style="
    color: red;
"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M215.311,196.935"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M250.935,277.399  c25.36-14.769,42.409-42.247,42.409-73.71c0-47.078-38.164-85.242-85.242-85.242s-85.242,38.164-85.242,85.242  c0,31.463,17.048,58.941,42.408,73.71"/>
<g>
    <path fill="#231F20" d="M173.653,282.14l-4.741-48.439c-0.059-0.58-0.327-1.092-0.715-1.482l-47.088,54.471   c0.48,0.449,1.127,0.714,1.82,0.676l48.578-2.721C172.82,284.568,173.783,283.448,173.653,282.14z"/>
</g>
<text transform="matrix(1 0 0 1 175.665 231.1914)" fill="#231F20" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" font-family="'Helvetica'" font-size="99.4919">A</text>
</svg>

I am guessing that it has something to do with how the image was created but can't find much resources on how to resolve the issue. Any help would be awesome!

Thanks.

Answer 1

IcoMoon will ignore stroke attributes and text objects. It is only interested in filled shapes. In your case, that means it will only import the triangle at the end of the circular curve.

You need to convert your paths and text into filled shapes. In Inkscape, try selecting your artwork and pressing CtrlShiftC. In Illustrator, there's an Outline Stroke option somewhere in the Path menu, and the command for converting text to outlines is, if I recall correctly, ⌘ShiftC on a Mac (probably ControlShiftC otherwise).

If you have any overlapping objects, they will probably have to be merged together too.

And don't expect perfect results. IcoMoon does a reasonable job, but it may convert curves into straight lines in some situations.