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.
One Div
Esse facilita também por, além de disponibilizar os estilo, mostrar os navegadores compatíveis.
Peculiar
Set de ícones pequenos e variados. O código pode ser visto na página do GitHub.
Pure CSS Gui icons
84 ícones criados como exercício, mas 100% funcionais. Com exemplos de código, mais indicado pra quem conhece um pouco de CSS.
Pure CSS Social Media Icons
Ícones sociais criados em puro CSS.