Pack de Iconos en CSS

Los iconos: tan chicos y tan dificiles de hacer !
Los iconos son un gran aporte visual para nuestras paginas, pero que complicado es diseñar un conjunto de ellos y que mantengan una unidad.

Aqui te presento una excelente galeria de iconos realizados solo con CSS !!!

Los iconos fueron y serán una ayuda visual indiscutible para cualquier sitio web que pretenda un grado mínimo de seriedad.

Nos permiten organizar rápidamente los contenidos y generar prioridades visuales en los diferentes elementos de nuestra página.Sirven para los menús, las listas y para toda parte de nuestro sitio que queramos embellecer.

Hoy te presento una galería de iconos realizados solo con código CSS, llamado Cikonss.

Cikonss es un set de iconos realizados con hojas de estilo cascada, lo que reduce el gasto de ancho de banda en nuestro servidor y agiliza la maquetación.

El funcionamiento es muy simple. Solo basta con linkear un archivo CSS en nuestro documento, e insertar 2 etiquetas SPAN donde queremos que aparezcan los iconos.

Modo de Uso

Incluimos la hojas de estilos dentro de nuestro HEAD:

<link rel="stylesheet" href="cikonss.css" />

Y luego creamos un elemento al que le aplicaremos el diseño del icono elegido.
Puedes elegir entre 43 iconos, 5 tamaños y 3 variantes.

Opciones:

• Estilo general: .icon (obligatorio)
• Tamaño: .icon-small, .icon-mid, .icon-large, .icon-extra-large, .icon-huge (obligatorio)
• Variante: .icon-square, .icon-rounded (opcional)

Y lo aplicas en tu documento de esta forma:

<span class="icon icon-mid"><span class="icon-mail"></span></span>

La primer etiqueta SPAN define la forma y tamaño, y la segunda el icono que utilizaremos.

La compatibilidad es muy buena, de hecho es compatible hasta con IE8 !!!!

Web Oficial: Cikonss

Saludos!
Cristian