Logo SatellaSoft



Atenção: nosso site receberá uma nova atualização em seus serviços em breve. Você poderá ter uma experiência ruim com renderização de algumas imagens, porém elas serão solucionadas na próxima atualização.


Criando fontes de ícones com Ico Moon

Converta arquivos SVG em fontes para utilizar em sites e aplicativos.


Ícone homem Gunnar Correa
Ícone data de publicação 18/04/2020
Ícone quantidade de visualização 273
Ícone bandeira do Brasil Português

Hoje venho mostrar uma alternativa incrível para o Font Awesome, inclusive, a ferramenta é gratuita e disponibiliza o manual de fontes.

Tudo começou quando as fontes que importo em um dos meus projetos não foram carregadas, imaginei que o site Font Awesome estava offline ou que estava limitando o número de requisições. Com base nesse problema, tomei a decisão correta: não depender de um serviço de terceiros hospedados em outros servidores, então, fui em busca de algumas alternativas, e eis que encontro o maravilhoso Ico Moon.

Icon Moon é uma ferramenta online que trabalha de forma parecida com o Font Awesome, porém, ela permite que você faça o upload de suas imagens em SVG e transforma-la em ícones. A plataforma também possui vários pacotes de fontes, algumas gratuitas e outras pagas.

Site oficial: https://icomoon.io

Então vamos direto para a aula, é só dar play do vídeo abaixo e conhecer a fundo como tudo funciona.

Quando você finalizar a edição das fontes e fizer o download, vai precisar apenas da pasta fonts e do arquivo style.css.

Abaixo deixo o código HTML que utilizei durante as aulas.


<!doctype html>
<html lang="pt-br">
	<head>
		<title>Icon Moon Tutorial</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
	</head>
	
	<body>
		<span class="icon-home" style="font-size:2em; color: red;"></span>
		<span class="icon-grin" style="font-size:2em; color: green;"></span>
		<span class="icon-instagram" style="font-size:2em; color: blue;"></span>
		<span class="icon-vimeo" style="font-size:2em; color: purple;"></span>
		<span class="icon-html-five" style="font-size:2em; color: pink;"></span>
	</body>
</html>

E você, já conhecia esse serviço ou utilizava algum parecido? Deixe aqui nos comentários.

Por hora é isso, vou ficando por aqui e nos vemos em breve.




Sobre o autor


Gunnar Correa

Nome: Gunnar Correa

Site: http://www.gunnarcorrea.com


Autodidata, graduado em Desenvolvimento Web e especialista em Tecnologias na Educação em uma universidade no interior de São Paulo. Comecei meus estudos na área de programação quando ainda era criança, e atualmente estou estudando desenvolvimento de jogos.

Sou o CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!

 


 

Siga-nos