Como usar?

Selecione o peso e o canto

Baixar

O download inclui ícones no formato SVG, os arquivos de fonte, o CSS necessário para usar o iconfont e um HTML de amostra

Registrar e fazer o download
CDN

Inclua o arquivo CSS na seção <cabeçalho> do seu site ou através de um @import em seu CSS.

Registre-se e obtenha
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 Rounded fi-rr <i class="fi fi-rr-user"></i>
Bold Rounded fi-br <i class="fi fi-br-user"></i>
Solid Rounded fi-sr <i class="fi fi-sr-user"></i>
Regular Straight fi-rs <i class="fi fi-rs-user"></i>
Bold Straight fi-bs <i class="fi fi-bs-user"></i>
Solid Straight fi-ss <i class="fi fi-ss-user"></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ções0.000000e+0 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