Criando fontes de ícones com Ico Moon

Gunnar CorreaGunnar Correa18/04/2020 às 10:58:19 - 1.784 acessos

Criando fontes de ícones com Ico Moon

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


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.


Converter svg svg para ícones svg ícones criando ícones ícones com svg icon moon tutorial criando ícones para sites font awesome alternativa

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários