CSS icons: kits de ícones feitos em puro CSS

Anúncios Google

Engraçado a gente lembrar do design web alguns anos atrás, quando pra exibir um ícone, era obrigatório criar uma imagem, cortar certinho (ou usar image sprites, que nem todo mundo fazia…) e aí inserir no lugar pela marcação de imagem ou como background em HTML.

Claro que às vezes isso ainda é bem útil, mas com as facilidades do CSS 3, ficou possível criar ícones sem imagens “de fato”, gerados só com estilização de elementos como divs e pseudo-elementos.

Se não tem muita prática com CSS, pra ficar mais claro, veja:

Esse ícone aí não existe como imagem tipo JPG, PNG e afins. Foi criado com essa marcação CSS:

<style type="text/css">
 span{height:40px; width:40px; display:block; position:relative;}
 .demoSpan1{position:relative;}
 .demoSpan1:before{content:''; height:16px; width:12px; display:block; background:#333; position:absolute; top:12px; left:0px;}
 .demoSpan1:after{content:''; height:16px; width:0; display:block; border:10px transparent solid; border-left-width:0; border-right-color:#333; position:absolute; top:2px; left:12px;}
 .demoSpan2{position:absolute; top:0; left:0;}
 .demoSpan2:before{content:''; height:40px; width:40px; display:block; border:4px solid transparent; border-right:4px solid #333; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px; position:absolute; top:-4px; left:-6px; }
 .demoSpan2:after{content:''; height:30px; width:30px; display:block; border:4px solid transparent; border-right:4px solid #333; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; position:absolute; top:2px; left:-4px; }
 </style>

E dois elementos span:

<span class="demoSpan1"><span class="demoSpan2"></span></span>

Confira esses kits de ícones em CSS. Cada um tem instruções de uso, mas se tiver dúvida, pode deixar um comentário. Clique nas imagens para visitar o site de origem.

Cikonss

Pacote bem variado com vários tamanho e compatível até com Internet Explorer 8, pois usa CSS2 onde é possível.

https://github.com/zzap/Cikonss

CSS 3 Icons

Mais de 200 ícones (e crescendo) muito bem feitos. Organizado e fácil de usar.

CSS 3 Monochrome Icon Set

Set com cerca de 85 ícones também com excelente acabamento e até detalhes em duas cores.

iOS Icons

Ícones do sistema operacional da Apple. Um pouco mais complicado de usar para iniciantes já que o código não foi disponibilizado, mas se você manjar de CSS, pode examinar o código-fonte da página, como recomenda o autor.