Começar
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
Latest version: 2.6.0
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-square-right"></i>
<i class="fi fi-ro-arrow-right"></i>
<i class="fi fi-ro-book"></i>
<i class="fi fi-ro-broom"></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-square-right"></i> |
|
| Negrito | Arredondado | fi-br | <i class="fi fi-br-square-right"></i> |
|
| Sólido | Arredondado | fi-sr | <i class="fi fi-sr-square-right"></i> |
|
| Fino | Arredondado | fi-tr | <i class="fi fi-tr-square-right"></i> |
|
| Regular | Simples | fi-rs | <i class="fi fi-rs-square-right"></i> |
|
| Negrito | Simples | fi-bs | <i class="fi fi-bs-square-right"></i> |
|
| Sólido | Simples | fi-ss | <i class="fi fi-ss-square-right"></i> |
|
| Fino | Simples | fi-ts | <i class="fi fi-ts-square-right"></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-square-right"></i>
<i class="fi fi-br-arrow-right"></i>
<i class="fi fi-sr-book"></i>
<i class="fi fi-rr-broom"></i>
</body>
Resumo da Licença
Nossa Licença Permite que você use o conteúdo:
- Para projetos comerciais e s
- Em mídia digital ou s
- Por um número ilimitado de vezes e de forma permanente
- Anywhere in the world
- To make modifications and derived works
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.
If you have any other questions, please check the FAQ section