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)