Como usar Uicons?

Há três maneiras de incluir Uicons em seu projeto de site: você pode inseri-los por meio de nossa CDN, baixá-los e obter o pacote completo de ícones em todos os formatos disponíveis (SVG, CSS, arquivo de fonte e HTML, por exemplo) ou instalá-los por meio do gerenciador de pacotes npm.

Usando Uicons via CDN

CDN é o método mais rápido para incluir Uicons em sua página. Você pode copy-paste the link na seção de <head> do HTML para carregar nosso CSS ou usar @import para inserir o código no seu CSS.

Selecione o ícone que deseja usar e clique nos botões de cópia na seção "CDN" para adicionar o código ao projeto.

Usando Uicons via Download

O recurso Download permite que você baixe o pacote completo de ícones com os arquivos SVG individuais para cada ícone, as folhas de estilo CSS, os arquivos de fonte e um HTML de exemplo.

Selecione o ícone que deseja usar e clique no botão de download na seção "Download" para obter o pacote completo de ícones.

Usando Uicons por meio do gerenciador de pacotes npm

Instale a versão mais recente do Uicons – que inclui cada ícone individual em formato SVG, folhas de estilo CSS e arquivos de fonte – e mantenha seu projeto atualizado com os ícones e melhorias mais recentes através do gerenciador de pacotes npm.

npm i @flaticon/flaticon-uicons

Resumindo, com este método você obtém o mesmo resultado do formato que pode ser baixado, mas em um pacote mais fácil de atualizar.
Para obter informações mais detalhadas visite a página de repositório.

O que está no download?

Todo pacote de estilo de Uicons contém os seguintes diretórios e arquivos:

Arquivos & pastas O que são
/css Stylesheets para Web Fonts
/svg SVG individual para cada ícone
/webfont Arquivos Web Font usados com CSS
Usar Web Fonts com CSS

O arquivo /css/uicons-[your-style].css contém o estilo central e mais todos os estilos de ícone de que você precisará ao usar Uicons. A pasta /webfonts contém todos os arquivos da família tipográfica que o CSS acima referencia e do qual depende.

Copie toda a pasta /webfonts e os /css/uicons-[your-style].css no diretório de ativos estáticos de seu projeto (ou onde preferir manter seus recursos de front end e coisas de fornecedor).

Adicione uma referência ao arquivo /css/uicons-[your-style].css copiado no <cabeçalho> de cada template ou página em que queira usar os Uicons.

Substitua uicons-[your-style].css pelo nome do estilo que você baixou.

Ex: uicons-rounded-outline.css

<head>
  <link href="/your-path-to-uicons/css/uicons-[your-style].css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fi fi-ro-user"></i>
  <i class="fi fi-ro-arrow-right"></i>
  <i class="fi fi-ro-book"></i>
  <i class="fi fi-ro-clean"></i>
</body>

Como você está gerenciando todos os arquivos baixados sozinho, certifique-se de que as referências em suas páginas <head> estão de acordo com o local para onde moveu todos os seus arquivos Uicons’ files no seu projeto.

Usar estilos múltiplos

Você quer usar mais de um estilo? Para fazer isso, você precisa fazer o download de todos os estilos que você quer usar no seu projeto.

Uicons permite que você use dois estilos de canto diferentes (arredondado e reto) e três pesos diferentes (regular, negrito e sólido) para cada um.

Depois, você vai precisar colocar todos os arquivos nas pastas que explicamos na seção anterior, e depois adicionar a referência na seção de cada estilo que você baixou.

<head>
  <link href="/your-path-to-uicons/css/uicons-rounded-regular.css" rel="stylesheet">
  <link href="/your-path-to-uicons/css/uicons-rounded-bold.css" rel="stylesheet">
  <link href="/your-path-to-uicons/css/uicons-rounded-solid.css" rel="stylesheet">
</head>

Cada estilo usa um prefixo diferente, conforme podemos na tabela a seguir:

Peso Canto Prefixo Exemplo Resultado
Regular Arredondado fi-rr <i class="fi fi-rr-user"></i>
Negrito Arredondado fi-br <i class="fi fi-br-user"></i>
Sólido Arredondado fi-sr <i class="fi fi-sr-user"></i>
Regular Simples fi-rs <i class="fi fi-rs-user"></i>
Negrito Simples fi-bs <i class="fi fi-bs-user"></i>
Sólido Simples fi-ss <i class="fi fi-ss-user"></i>
Type Prefixo Exemplo Resultado
Marcas fi-rr <i class="fi fi-brands-instagram"></i>

Nós recomendamos manter as pastas de /webfonts e /css no mesmo diretório. Se não fizer isso, você precisará mudar o caminho para as web fonts mencionado no arquivo CSS de cada estilo.

Usar os ícones

Com as referências completas, agora você pode começar a referenciar ícones em seus templates ou páginas.

<body>
  <i class="fi fi-rr-user"></i>
  <i class="fi fi-br-arrow-right"></i>
  <i class="fi fi-sr-book"></i>
  <i class="fi fi-rr-clean"></i>
</body>
Resumo da Licença

Nossa Licença Permite que você use o conteúdo:

  • Para projetos comerciais e  pessoais
  • Em mídia digital ou  impressa
  • Por um  número ilimitado de vezes  e de forma permanente
  • De qualquer lugar do mundo 
  • Fazer  modificações  e trabalhos derivados

Este texto é um resumo apenas para informação. Não constitui nenhuma obrigação contratual. Para mais informações, por favor, leia os nossos Termos de Uso antes de usar o conteúdo

Como atribuir

A criação de ícones de qualidade requer muito tempo e esforço. Pedimos apenas que você adicione um pequeno link de atribuição. Escolha a mídia na qual você vai usar o recurso.

Copie este link e cole sempre que estiver visível, perto de onde estiver usando o recurso. Se não for possível, coloque-o no rodapé de seu site, blog ou newsletter, ou na parte de créditos.

Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>

Se tiver outras perguntas, por favor, verifique a seção de Perguntas Frequentes

bold regular solid rounded straight

Qual é a probabilidade de você recomendar o Flaticon a um amigo?

0 1 2 3 4 5 6 7 8 9 10
Improvável Muito provável