Fontes de ícones

Fontes de ícones permitem que você converta rapidamente ícones vetoriais em fontes web. Isso significa que você pode exibir ícones vetoriais em seu site e os controlar com CSS. Confira essa página para saber mais sobre fontes de ícones e como usá-las com o Flaticon.

Recursos

  • 1. Alta resolução

    Os ícones são redimensionáveis e prontos para tela de retina. Perfeitos para um design responsivo. Eles ficam bem em telas de qualquer resolução.

  • 2. Rápido e fácil

    Criar fontes de ícones com o Flaticon está mais fácil do que nunca. Adicione ícones às suas coleções e baixe-as em segundos.

  • 3. Total controle CSS

    As fontes de ícone são basicamente texto, então pode mudar seu aspecto facilmente com CSS.

  • 4. Acessível

    Flaticon nomeia símbolos com termos comuns para ajudar os leitores de tela a entenderem seu significado ;-).

  • 5. Animáveis

    As transições e animações CSS são completamente compatíveis com fontes de ícones.

  • 6. Organizado

    Chega de montes de imagens ou sprites incômodos. Pare de desperdiçar o seu tempo!

In we icons

<p>In <i class="flaticon-logo-symbol"></i> we <i class="flaticon-heart"></i> icons</p>

Just one file load. (~20kb)
.ttf, .woff, .eot, .svg

Como usar fontes de ícone com flaticon

Tutorial de fontes de ícone parte 1

1. Prepare sua coleção

Adicione ícones de uma cor só à coleção para seu site

2. Baixe fontes de ícones

Abra sua coleção e pressione o botão de Baixar coleção, depois selecione fonte de ícone

Tutorial de Fontes de Ícone Parte 2
Tutorial de Fontes de Ícone Parte 3

3. Prepare sua coleção

Copie os arquivos de fonte e CSS para sua pasta web.

4. Carregar folha de estilo

Pedir a folha de estilo CSS do admnistrador de sua rede.

<link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css">
Tutorial de Fontes de Ícone Parte 4
Tutorial de Fontes de Ícone Parte 5

5. Use as classes

Use as classes de cada ícone e eles aparecerão em seu site. Depois, manipule-os via CSS.

Use o exemplo: <i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>
  • Apresentando as coleções

    As coleções são a essência do nosso aplicativo da web. Você quer saber como usá-las? Pressione "Próximo" para conferir o guia.

    1 de 9
  • Lista de coleção

    Lista de coleção

    Esta é uma lista das suas coleções. Você pode mudar o nome delas e elas estarão organizadas pelo uso. Clique em uma delas para começar a usar.

    2 de 9
  • Crie uma coleção

    Crie uma coleção

    Clique neste botão para criar uma coleção.

    3 de 9
  • Mude o nome

    Mude o nome

    Clique aqui para mudar o nome da coleção

    4 de 9
  • Ative a coleção

    Ative a coleção

    Esta é sua coleção ativa. Uma coleção pode ter até 256 ícones se você for um usuário registrado, ou 50 se você não for registrado.

    5 de 9
  • Cor

    Cor

    Acrescente cor a todos os ícones em sua coleção.

    6 de 9
  • Modo de edição

    Modo de edição

    Entre no modo de edição por clicar no ícone do lápis para editar o nome e a cor de cada ícone separadamente.

    7 de 9
  • Deletar

    Deletar

    Você não usa mais esta coleção? Delete-a e crie uma nova aqui.

    8 de 9
  • Aproveite!

    E isso é tudo. Se você tiver alguma pergunta pode contatar nossa equipe de suporte aqui.


    Obrigado por usar o Flaticon, esperamos que você aproveite o nosso serviço

    9 de 9
-
Você gosta do nosso serviço?