How to convert . svg icons to a font?

Asked

Viewed 591 times

-1

There is a recommended way to convert and combine various icons in the format .svg in a single source file (ttf, woff, etc.)?

I want to define a @font-face and assign my font, so that I can use your icons in the same way that is used for example in "Font Awesome", assigning a class to an element <i>:

<i class="meu-icone"></i>
css svg css-font-face font

  • And why bother? Why not use the same SVG? If it’s for compatibility, the support of the two is more or less the same. But if you really want to have online tools that do it for you

  • @Costamilam I know I can use them all .svg, but I’d like to learn how it’s done.

  • @Thiagokrempser I prefer to use as font than image, I use the Icomoon to generate the @font-face of SVG's which I upload. If you think my answer was right for your question, just mark it with the "green check".

1 answer

1


You can use a simple way to do this, which is as follows::

  • A ready-for-conversion system called Icomoon.

About the Iconmoon

The icons library of Icomoon presents only the best icons set there. All of our icons are designed in a precise pixel grid. The app Icomoon allows you to create and use your own icon packs in various formats, including SVG, Polymer, PDF, XAML, CSH, icon source with bandages or good sprites PNG/CSS ancient.

Note

If you want to create a custom icon and it does not exist on the internet, use a software called Inkscape. After creating the graphic vector icon, you should save in SVG and use a system like the one mentioned above to convert SVG --> font + @fonte-face.

  • How to create a font in Inkscape? I was curious, I use the tool, but I didn’t know I could do it

  • 1

    Inkspace saved in TTF or OTF or something? As far as I know it does not save or export fonts... https://inkscape.org/pt-br/learn/faq/#which are-the-formats-that-the-Inkscape-can-import

  • @Costamilam as you did not mention that you knew how to create the vectors and with Inkscape, I quoted the same to you if you wanted to create something custom. By summary Inkscape only creates the vectors even, it does not export/save in fonts, you would have to create the icons there in SVG and convert into a system like Iconmoon.

  • @hugocsl This is true, I answered up for it.

  • 2

    I suggest you remove that part of your answer, since it is wrong, so as not to confuse anyone

  • @I altered the answer to make it clearer and more objective.

Show 1 more comment

Browser other questions tagged css svg css-font-face font

You are not signed in. Login or sign up in order to post.