Design

CSS icons: kits de ícones feitos em puro CSS

Google+ Pinterest LinkedIn Tumblr
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.

Cikonss

https://github.com/zzap/Cikonss

CSS 3 Icons

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

CSS Icons

CSS 3 Monochrome Icon Set

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

CSS Monochrome icons

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.

iOS Icons

One Div

Esse facilita também por, além de disponibilizar os estilo, mostrar os navegadores compatíveis.

One Div Icons

Peculiar

Set de ícones pequenos e variados. O código pode ser visto na página do GitHub.

Peculiar icons

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 Gui Icons

Pure CSS Social Media Icons

Ícones sociais criados em puro CSS.

CSS Social Media Icons

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin