Ícones CSS

O que é

São os desenhinhos de carrinho, telefone, WhatsApp, lixeira, estrela… que aparecem em botões, menus e listas. No SWCore eles vêm numa fonte de ícones própria: você escreve <i class="swi-nome"></i> e o ícone aparece. Como é uma fonte, o ícone se comporta como uma letra: fica do tamanho do texto e da cor do texto. Quer maior? Aumente a letra. Quer vermelho? Pinte o texto de vermelho.

Vem no pacote complementar (swcore.compl.min.css), com o arquivo da fonte junto (fonts/swicons.woff2) — nada é buscado em outro site. São três conjuntos, pelo começo do nome: swi- contorno (841, o dia a dia), swis- sólido/preenchido (35) e swil- marcas e logos (155: WhatsApp, Instagram, Google…). Não precisa de JavaScript.

Quando usar

• Dentro de botão, antes ou depois do texto: " Comprar".
• Botão só com ícone (fechar, menu, lixeira) — sempre com aria-label dizendo o que faz.
• Contato no rodapé: telefone, e-mail, endereço, horário.
• Redes sociais: swil-whatsapp, swil-instagram, swil-facebook…
• Lista de vantagens com um ícone de "check" em cada item.

Comece aqui

1. 1

   Coloque o SWCore e o pacote complementar no <head>. Os ícones estão no complementar.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">

2. 2

   Escreva uma tag <i> com o nome do ícone na classe. Ache o nome na busca mais abaixo.

   <i class="swi-cart"></i>
   <i class="swil-whatsapp"></i>
   <i class="swis-cat"></i>

3. 3

   Dentro de um botão ou texto, ele já pega o tamanho e a cor dali.

   Falar no WhatsApp

   <button sw-btn="suc"><i class="swil-whatsapp"></i> Falar no WhatsApp</button>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<ul class="flx f-cl gap-p">
  <li class="flx alc gap-p"><i class="swi-phone t-pri" aria-hidden="true"></i> (11) 4002-8922</li>
  <li class="flx alc gap-p"><i class="swi-envelope t-pri" aria-hidden="true"></i> contato@barbeariadocentro.com.br</li>
  <li class="flx alc gap-p"><i class="swi-map-pin t-pri" aria-hidden="true"></i> Rua das Flores, 120 — Centro</li>
  <li class="flx alc gap-p"><i class="swi-time t-pri" aria-hidden="true"></i> Ter a sáb, 9h às 20h</li>
</ul>

<a href="https://wa.me/5511999999999" sw-btn="ghost rnd" aria-label="WhatsApp"><i class="swil-whatsapp"></i></a>
<a href="https://instagram.com/seuperfil" sw-btn="ghost rnd" aria-label="Instagram"><i class="swil-instagram"></i></a>
<a href="https://facebook.com/suapagina" sw-btn="ghost rnd" aria-label="Facebook"><i class="swil-facebook"></i></a>
<a href="https://youtube.com/@seucanal" sw-btn="ghost rnd" aria-label="YouTube"><i class="swil-youtube"></i></a>

<ul class="flx f-cl gap-p">
  <li class="flx alc gap-p"><i class="swi-check-circle t-suc t-g" aria-hidden="true"></i> Site pronto em 7 dias</li>
  <li class="flx alc gap-p"><i class="swi-check-circle t-suc t-g" aria-hidden="true"></i> Funciona no celular</li>
  <li class="flx alc gap-p"><i class="swi-check-circle t-suc t-g" aria-hidden="true"></i> Botão do WhatsApp</li>
</ul>

<div class="l l-3 gap-m">
  <div class="bg-sur bd r-m p-g"><i class="swi-cut t-xg t-pri" aria-hidden="true"></i><p class="t-txt">Corte</p></div>
  <div class="bg-sur bd r-m p-g"><i class="swi-spray-can t-xg t-pri" aria-hidden="true"></i><p class="t-txt">Barba</p></div>
  <div class="bg-sur bd r-m p-g"><i class="swi-spa t-xg t-pri" aria-hidden="true"></i><p class="t-txt">Relax</p></div>
</div>

Precisa de quê

• swcore.compl.min.css — a fonte de ícones (e a pasta fonts/ ao lado, se hospedar os arquivos você mesmo).
• swcore.min.css — para as classes de tamanho e cor usadas nos exemplos.

Cuidados — erros comuns

• Nome errado não dá erro: o ícone só não aparece. Copie o nome da busca em vez de adivinhar (ex.: é swi-cart, não existe swi-shopping-cart).
• A classe do ícone tem que ser a primeira da tag ou vir depois de um espaço: class="swi-cart t-xg" funciona; class="t-xg swi-cart" também. Só não junte sem espaço.
• Botão só com ícone precisa de aria-label; sem ele, quem usa leitor de tela ouve só "botão".
• Hospedando o SWCore no seu servidor? Copie também a pasta fonts/ junto do CSS; sem ela os ícones ficam em branco.
• O mesmo nome nem sempre existe nos três conjuntos: swi-heart existe, swis-heart não.

O que ele não faz

• O ícone é de uma cor só (é uma letra). Ícone colorido de várias cores, só com imagem/SVG.
• O conjunto sólido (swis-) tem só 35 ícones; a maioria dos desenhos existe apenas em contorno.