-1

Existe uma forma recomendável para converter e combinar vários ícones no formato .svg em um único arquivo de fonte (ttf, woff, etc)?

Quero definir uma @font-face e atribuir minha fonte, de modo que eu possa usar seus ícones da mesma forma que se usa por exemplo no "Font Awesome", atribuindo uma classe ao um elemento <i>:

<i class="meu-icone"></i>
3
  • E por que se dar o trabalho? Por que não usar o SVG mesmo? Se for por compatibilidade, o suporte dos dois é mais ou menos o mesmo. Mas se quiser mesmo tem ferramentas online que fazem isso pra ti
    – Costamilam
    31/05/2019 às 19:18
  • @Costamilam Sei que posso usar direto todos .svg, mas gostaria de aprender como é feito isso. 31/05/2019 às 19:24
  • @ThiagoKrempser eu prefiro utilizar como font do que imagem, eu utilizo o IcoMoon para gerar o @font-face dos SVG's os quais faço upload do mesmo. Caso você ache que a minha resposta foi adequada para a sua pergunta, é só marca-la com o "check verde".
    – user148754
    31/05/2019 às 19:26

1 Resposta 1

1

Você pode utilizar uma maneira simples para isto, a qual é a seguinte:

  • Um sistema pronto para esta conversão denominado IcoMoon.

Sobre o IconMoon

A biblioteca de ícones do IcoMoon apresenta apenas os melhores ícones definidos lá. Todos os nossos ícones são projetados em uma grade de pixels precisa. O aplicativo IcoMoon permite que você crie e use seus próprios pacotes de ícones em diversos formatos, incluindo SVG, Polymer, PDF, XAML, CSH, fonte de ícone com ligaduras ou boas sprites PNG/CSS antigos.

Nota

Caso você queira criar um ícone personalizado e que o mesmo não existe na internet, utilize um software denominado Inkscape. Após criar a vetorização gráfica do ícone, você deve salvar em SVG e utilizar um sistema como o citado acima para fazer a conversão de SVG --> font + @fonte-face.

6
  • Como criar uma fonte no Inkscape? Fiquei curioso, uso a ferramenta, mas não sabia que dava pra fazer isso
    – Costamilam
    31/05/2019 às 19:30
  • 1
    Inkspace salva em TTF ou OTF ou coisa do tipo? Até onde sei ele não salva nem exporta fontes... inkscape.org/pt-br/aprender/faq/…
    – hugocsl
    31/05/2019 às 19:33
  • @Costamilam como você não citou que sabia criar os vetores e com o Inkscape, eu citei o mesmo para você, caso você quisesse criar algo personalizado. Por resumo o Inkscape só cria os vetores mesmo, ele não exporta/salva em fontes, você teria que criar os icones lá em SVG e converter em um sistema como o IconMoon.
    – user148754
    31/05/2019 às 19:36
  • @hugocsl Isto é verdade, eu respondi acima para ele.
    – user148754
    31/05/2019 às 19:36
  • 2
    Sugiro remover essa parte da sua resposta, já que está errada, pra não confundir ninguém
    – Costamilam
    31/05/2019 às 19:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .