Anteriormente, ao criar sites, você tinha que usar ícones de bitmap. Era lindo, mas inconveniente por vários motivos. Hoje, os ícones vetoriais substituíram os ícones raster. Esta é uma solução original e elegante que vai decorar e refrescar o seu site.
Instruções
Passo 1
Existe um bom serviço da Web para a criação de fontes a partir de ícones. Chama-se Fontastic. É totalmente gratuito e sem anúncios. O primeiro passo é se cadastrar no site do serviço. Vá para o site fontastic.me, digite seu endereço de e-mail nos campos de entrada e crie uma senha, em seguida, clique no grande botão amarelo "Crie sua fonte de ícone". Às vezes acontece que nenhuma informação confirmando o registro bem-sucedido é exibida. Não se preocupe com isso, vá para a próxima etapa.
Passo 2
Agora clique no botão "Login" localizado no canto superior direito. Na página que se abre, digite seu e-mail e senha novamente, pressione o botão "Login".
Depois de esperar alguns segundos, o painel para a criação de fontes a partir de ícones será aberto.
etapa 3
Aqui está uma grande seleção de ícones. Ao clicar nos ícones que você gosta com o mouse, selecione quantos ícones você precisar. Na parte superior, após a palavra "PUBLICAR", é indicado o número de ícones selecionados.
Passo 4
Se você não tiver ícones suficientes do número apresentado, role para baixo até a parte inferior da página e encontre o botão que diz "Adicionar mais ícones". Clique nisso.
Etapa 5
Uma página com pacotes de ícones adicionais será aberta. Alguns deles são pagos (rotulados como "Premium"), outros são gratuitos. Para ativar ícones adicionais, pressione o botão "ATIVAR" nos pacotes selecionados. Agora eles aparecerão na lista geral de ícones disponíveis quando você começar a usar o painel de controle clicando no botão "Home" no menu superior.
Etapa 6
Se precisar adicionar seus próprios ícones, na mesma página no canto superior direito, clique no botão "IMPORTAR ÍCONES". Agora você pode carregar seus próprios ícones. Observe que apenas o formato vetorial SVG é compatível.
Etapa 7
Depois de selecionar o número necessário de ícones, pressione o botão "PERSONALIZAR". Aqui você verá todos os ícones selecionados e poderá atribuir nomes de classe arbitrários a eles, por meio dos quais os referirá em estilos CSS. Ou você pode deixar os nomes padrão que o sistema atribuiu aos ícones.
Etapa 8
Pressione o botão "PUBLICAR". Aqui você pode baixar a fonte do ícone do vetor criado (botão "DOWNLOAD"). Baixe o arquivo de fontes criado pelo serviço para o seu computador.
Etapa 9
O arquivo baixado contém o arquivo de estilo CSS, o arquivo HTML com os nomes das classes de ícones e a pasta "fonts" com as fontes. Esta fonte de ícone pode ser usada em seu site.
Etapa 10
Para usar a fonte do ícone criada, você precisa fazer o seguinte:
- descompacte o conteúdo do arquivo e faça o upload para o seu site no diretório com estilos;
- insira um link para um arquivo CSS na seção HEAD de todas as páginas do site que funcionarão com esta fonte de ícone;
- no código da página, usamos o nome das classes criadas anteriormente para usar a fonte do ícone recém-criada.
