Criando fontes de ícones com Ico Moon

CursoSimplificando o desenvolvimento de APIs PHP com Swagger

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.