Pack de Iconos en CSS

Iconos en CSSLos 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.

iconos-con-css

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.

bot_descargar

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

Web Oficial: Cikonss

Saludos!
Cristian

Video Curso Maquetación Web y Conversión PSD a HTML

Cursos de desarrollo web:

[featured_products per_page="12" columns="4"]

Diseñador y Programador Web Full-Stack especializado en PHP / MySQL / Laravel / Wordpress / HTML5 / CSS3 / JS.

5 thoughts on “Pack de Iconos en CSS

  1. Eborio Linárez Reply

    Muy interesante, es increíble todo lo que hoy en día se puede hacer solo con CSS. Pronto los estaré implementando. Gracias por compartirlo en mi comunidad de Google+

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.