DEV Community

Fernanda Sayuri
Fernanda Sayuri

Posted on

Como criar fonte de ícones

Para realizar a criação de font utilizei o site Fontello, mas também existem outros sites como alternativa.

Salve todas as imagens que deseja como ícone no formato SVG e arraste na seção "Custom Icons".

Image description

Resultado com todos os ícones importados e selecionados.

Image description

Na aba "Customize Names" é possível ver todos os ícones importado e verificar o nome de cada um, é importante lembrar que não são suportados caractéres especiais, além disso, podemos definir o nome da fonte.

Image description

Após isso, é necessário fazer o dowload da font, extrair a pasta e importar no projeto a pasta CSS e fonts.

Image description

No projeto é preciso importar o css gerado.

Image description

Agora só usar seus ícones passando eles como classe onde desejar.

Image description

Por fim, também é possível criar classes globais auxiliares para configurar o tamanho dos ícones utilizando a propriedade font-size.

Image description

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Playwright CLI Flags Tutorial

5 Playwright CLI Flags That Will Transform Your Testing Workflow

  • 0:56 --last-failed
  • 2:34 --only-changed
  • 4:27 --repeat-each
  • 5:15 --forbid-only
  • 5:51 --ui --headed --workers 1

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Click on any timestamp above to jump directly to that section in the tutorial!

Watch Full Video 📹️

👋 Kindness is contagious

Please show some love ❤️ or drop a kind note in the comments if this was helpful to you!

Got it!