Cikonss es un pack de iconos creados completamente en CSS y que nos permitirá hacer la página mas liviana a demás de proporcionarnos unos iconos bastante minimaliistas que combinan perfectamente con los diseños actuales.

Cikonss es completamente gratuito e incluso se puede colaborar a través de Github.

 

¿COMO FUNCIONA?

– En primer lugar tenemos que acceder a la página oficial, en ella nos encontraremos con el enlace de descarga, el repositorio Github y una guía de como se usan los iconos.

1

– Nos descargamos los iconos a través del botón DOWNLOAD que tenemos en rojo.

– Extraemos todo el paquete con la extensión .zip. En el nos encontramos con muchos archivos .HTML que nos muestran ejemplos de los diferentes iconos y tamaños.

2

– El archivo necesario y de donde sacaremos los iconos es el cikonss.css , todos los demás los podemos eliminar o simplemente tenerlos en otra carpeta para que nos sirvan de ejemplo pero que no nos ocupe espacio en nuestro servidor.

– Para que funcionen los iconos descargados necesitamos decirle a nuestro archivo HTML que existe una hoja de estilos que los contiene. Colocamos la siguiente linea entre las etiquetas HEAD.

Hay 43 iconos, 5 tamaños y 3 variantes.

     Estilo general: .icon (Obligatorio)

     Tamaño: .icon-small, icon-mid, .icon-large, .icon-extra-large, -icon-huge       (Obligatorio)

     Variante: .icon-square, .icon-rounded (Opcional)

– Para colocarlo en el archivo HTML es necesario insertar la etiqueta span con el tipo de icono colocado en una clase.

– Dentro de la etiqueta span creada anteriormente colocamos el icono en cuestión:

 

The following two tabs change content below.
Programador por definición, diseñador por hobby, futuro Ingeniero Informático y amante de lo sencillo.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies. CERRAR