less/stampa-light.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>stampa-light</title>
		<style>
		body {
			margin:0;
			padding:10px 20px;
			background:#fff;
			color:#222;
			}
		h1, div, footer {
			font-family:"Helvetica Neue", Arial, sans-serif;
			}
		h1 {
			margin:0 0 20px;
			font-size:32px;
			font-weight:normal;
			}
		.icons {
			margin-bottom:40px;
			-webkit-column-count:5;
			   -moz-column-count:5;
			        column-count:5;
			-webkit-column-gap:20px;
			   -moz-column-gap:20px;
			        column-gap:20px;
			}
		.icons__item,
		.icons__item i {
			line-height:2em;
			cursor:pointer;
			}
		.icons__item:hover {
			color:#3c90be;
			}
		.icons__item i {
			display:inline-block;
			width:32px;
			text-align:center;
			}
		.icons__item:hover i {
			-webkit-transform:scale(1.5);
			        transform:scale(1.5);
			}
		footer {
			margin-top:40px;
			font-size:14px;
			color:#999;
			}

		/* Generated by grunt-webfont */


	/* if this renders then it works! */ 
@font-face {
	font-family:"stampa-light";
	src: url("../fonts/stampa/stampa-light.eot");
	font-weight: normal;
	font-style: normal;
	/* unicode-range: U+F101-F180; */
}
@font-face {
	font-family: "stampa-light";
	src: url("../fonts/stampa/stampa-light.eot");
	src: url("../fonts/stampa/stampa-light.eot?#iefix") format("embedded-opentype"),
		url("../fonts/stampa/stampa-light.woff") format("woff"),
		url("../fonts/stampa/stampa-light.ttf") format("truetype"),
		url("../fonts/stampa/stampa-light.svg?#stampa-light") format("svg");
	font-weight: normal;
	font-style: normal;
	/* unicode-range: U+F101-F180; */
}

.icn,
.ligature-icons {
	font-family: "stampa-light";
	display: inline-block;
	/* vertical-align: middle; */
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	speak: none;
	text-decoration: inherit;
	text-transform: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* Icons */


.icn-abierto:before {
	content:"abierto";
}


.icn-acto:before {
	content:"acto";
}


.icn-admin:before {
	content:"admin";
}


.icn-alarma:before {
	content:"alarma";
}


.icn-ampolleta:before {
	content:"ampolleta";
}


.icn-anuncio:before {
	content:"anuncio";
}


.icn-archivo:before {
	content:"archivo";
}


.icn-asterisco:before {
	content:"asterisco";
}


.icn-aviso:before {
	content:"aviso";
}


.icn-biblioteca:before {
	content:"biblioteca";
}


.icn-bower:before {
	content:"bower";
}


.icn-calendario:before {
	content:"calendario";
}


.icn-camara:before {
	content:"camara";
}


.icn-caron:before {
	content:"caron";
}


.icn-caronabajo:before {
	content:"caronabajo";
}


.icn-caronarriba:before {
	content:"caronarriba";
}


.icn-caronizquierda:before {
	content:"caronizquierda";
}


.icn-casiopea:before {
	content:"casiopea";
}


.icn-cerrado:before {
	content:"cerrado";
}


.icn-ciclo:before {
	content:"ciclo";
}


.icn-circulo:before {
	content:"circulo";
}


.icn-clip:before {
	content:"clip";
}


.icn-codigo:before {
	content:"codigo";
}


.icn-compartir:before {
	content:"compartir";
}


.icn-constel:before {
	content:"constel";
}


.icn-corazon:before {
	content:"corazon";
}


.icn-cruzdelsur:before {
	content:"cruzdelsur";
}


.icn-cuadro:before {
	content:"cuadro";
}


.icn-descargar:before {
	content:"descargar";
}


.icn-documento:before {
	content:"documento";
}


.icn-email:before {
	content:"email";
}


.icn-engranaje:before {
	content:"engranaje";
}


.icn-enlace:before {
	content:"enlace";
}


.icn-enlacehorizontal:before {
	content:"enlacehorizontal";
}


.icn-equis:before {
	content:"equis";
}


.icn-ese:before {
	content:"ese";
}


.icn-estorninos:before {
	content:"estorninos";
}


.icn-estrella:before {
	content:"estrella";
}


.icn-etiqueta:before {
	content:"etiqueta";
}


.icn-facebook:before {
	content:"facebook";
}


.icn-flecha:before {
	content:"flecha";
}


.icn-flechaabajo:before {
	content:"flechaabajo";
}


.icn-flechaarriba:before {
	content:"flechaarriba";
}


.icn-flechaizquierda:before {
	content:"flechaizquierda";
}


.icn-flickr:before {
	content:"flickr";
}


.icn-grafico:before {
	content:"grafico";
}


.icn-hedera:before {
	content:"hedera";
}


.icn-hogar:before {
	content:"hogar";
}


.icn-imagen:before {
	content:"imagen";
}


.icn-impresora:before {
	content:"impresora";
}


.icn-ingresar:before {
	content:"ingresar";
}


.icn-jekyll:before {
	content:"jekyll";
}


.icn-lapiz:before {
	content:"lapiz";
}


.icn-lentes:before {
	content:"lentes";
}


.icn-less:before {
	content:"less";
}


.icn-libro:before {
	content:"libro";
}


.icn-lupa:before {
	content:"lupa";
}


.icn-lupamas:before {
	content:"lupamas";
}


.icn-lupamenos:before {
	content:"lupamenos";
}


.icn-mano:before {
	content:"mano";
}


.icn-manoabajo:before {
	content:"manoabajo";
}


.icn-manoarriba:before {
	content:"manoarriba";
}


.icn-manoizquierda:before {
	content:"manoizquierda";
}


.icn-mapa:before {
	content:"mapa";
}


.icn-mapamas:before {
	content:"mapamas";
}


.icn-marcador:before {
	content:"marcador";
}


.icn-mas:before {
	content:"mas";
}


.icn-menos:before {
	content:"menos";
}


.icn-menu:before {
	content:"menu";
}


.icn-movil:before {
	content:"movil";
}


.icn-nav:before {
	content:"nav";
}


.icn-navabajo:before {
	content:"navabajo";
}


.icn-navarriba:before {
	content:"navarriba";
}


.icn-navizquierda:before {
	content:"navizquierda";
}


.icn-noticias:before {
	content:"noticias";
}


.icn-ojo:before {
	content:"ojo";
}


.icn-ordenhorizontal:before {
	content:"ordenhorizontal";
}


.icn-ordenvertical:before {
	content:"ordenvertical";
}


.icn-palabra:before {
	content:"palabra";
}


.icn-parlante:before {
	content:"parlante";
}


.icn-parrafo:before {
	content:"parrafo";
}


.icn-pc:before {
	content:"pc";
}


.icn-perfil:before {
	content:"perfil";
}


.icn-prohibir:before {
	content:"prohibir";
}


.icn-rama:before {
	content:"rama";
}


.icn-refrescar:before {
	content:"refrescar";
}


.icn-reloj:before {
	content:"reloj";
}


.icn-rss:before {
	content:"rss";
}


.icn-salir:before {
	content:"salir";
}


.icn-sitemap:before {
	content:"sitemap";
}


.icn-soundcloud:before {
	content:"soundcloud";
}


.icn-stampa:before {
	content:"stampa";
}


.icn-subir:before {
	content:"subir";
}


.icn-tablet:before {
	content:"tablet";
}


.icn-tiempo:before {
	content:"tiempo";
}


.icn-trabajo:before {
	content:"trabajo";
}


.icn-travesia:before {
	content:"travesia";
}


.icn-twitter:before {
	content:"twitter";
}


.icn-usuario:before {
	content:"usuario";
}


.icn-usuariomas:before {
	content:"usuariomas";
}


.icn-usuariomenos:before {
	content:"usuariomenos";
}


.icn-usuarios:before {
	content:"usuarios";
}


.icn-vimeo:before {
	content:"vimeo";
}


.icn-vineta:before {
	content:"vineta";
}


.icn-visto:before {
	content:"visto";
}


.icn-youtube:before {
	content:"youtube";
}

		</style>
	</head>
	<body>
		<h1>stampa-light</h1>
		<h5>Listado completo de íconos. Al hacer click sobre el ícono puede ver más abajo las 2 formas de invocarlo en el HTML.</h5>
		<div class="icons" id="icons">
			
				<div class="icons__item" data-name="abierto"><i class="icn icn-abierto"></i> icn-abierto</div>
			
				<div class="icons__item" data-name="acto"><i class="icn icn-acto"></i> icn-acto</div>
			
				<div class="icons__item" data-name="admin"><i class="icn icn-admin"></i> icn-admin</div>
			
				<div class="icons__item" data-name="alarma"><i class="icn icn-alarma"></i> icn-alarma</div>
			
				<div class="icons__item" data-name="ampolleta"><i class="icn icn-ampolleta"></i> icn-ampolleta</div>
			
				<div class="icons__item" data-name="anuncio"><i class="icn icn-anuncio"></i> icn-anuncio</div>
			
				<div class="icons__item" data-name="archivo"><i class="icn icn-archivo"></i> icn-archivo</div>
			
				<div class="icons__item" data-name="asterisco"><i class="icn icn-asterisco"></i> icn-asterisco</div>
			
				<div class="icons__item" data-name="aviso"><i class="icn icn-aviso"></i> icn-aviso</div>
			
				<div class="icons__item" data-name="biblioteca"><i class="icn icn-biblioteca"></i> icn-biblioteca</div>
			
				<div class="icons__item" data-name="bower"><i class="icn icn-bower"></i> icn-bower</div>
			
				<div class="icons__item" data-name="calendario"><i class="icn icn-calendario"></i> icn-calendario</div>
			
				<div class="icons__item" data-name="camara"><i class="icn icn-camara"></i> icn-camara</div>
			
				<div class="icons__item" data-name="caron"><i class="icn icn-caron"></i> icn-caron</div>
			
				<div class="icons__item" data-name="caronabajo"><i class="icn icn-caronabajo"></i> icn-caronabajo</div>
			
				<div class="icons__item" data-name="caronarriba"><i class="icn icn-caronarriba"></i> icn-caronarriba</div>
			
				<div class="icons__item" data-name="caronizquierda"><i class="icn icn-caronizquierda"></i> icn-caronizquierda</div>
			
				<div class="icons__item" data-name="casiopea"><i class="icn icn-casiopea"></i> icn-casiopea</div>
			
				<div class="icons__item" data-name="cerrado"><i class="icn icn-cerrado"></i> icn-cerrado</div>
			
				<div class="icons__item" data-name="ciclo"><i class="icn icn-ciclo"></i> icn-ciclo</div>
			
				<div class="icons__item" data-name="circulo"><i class="icn icn-circulo"></i> icn-circulo</div>
			
				<div class="icons__item" data-name="clip"><i class="icn icn-clip"></i> icn-clip</div>
			
				<div class="icons__item" data-name="codigo"><i class="icn icn-codigo"></i> icn-codigo</div>
			
				<div class="icons__item" data-name="compartir"><i class="icn icn-compartir"></i> icn-compartir</div>
			
				<div class="icons__item" data-name="constel"><i class="icn icn-constel"></i> icn-constel</div>
			
				<div class="icons__item" data-name="corazon"><i class="icn icn-corazon"></i> icn-corazon</div>
			
				<div class="icons__item" data-name="cruzdelsur"><i class="icn icn-cruzdelsur"></i> icn-cruzdelsur</div>
			
				<div class="icons__item" data-name="cuadro"><i class="icn icn-cuadro"></i> icn-cuadro</div>
			
				<div class="icons__item" data-name="descargar"><i class="icn icn-descargar"></i> icn-descargar</div>
			
				<div class="icons__item" data-name="documento"><i class="icn icn-documento"></i> icn-documento</div>
			
				<div class="icons__item" data-name="email"><i class="icn icn-email"></i> icn-email</div>
			
				<div class="icons__item" data-name="engranaje"><i class="icn icn-engranaje"></i> icn-engranaje</div>
			
				<div class="icons__item" data-name="enlace"><i class="icn icn-enlace"></i> icn-enlace</div>
			
				<div class="icons__item" data-name="enlacehorizontal"><i class="icn icn-enlacehorizontal"></i> icn-enlacehorizontal</div>
			
				<div class="icons__item" data-name="equis"><i class="icn icn-equis"></i> icn-equis</div>
			
				<div class="icons__item" data-name="ese"><i class="icn icn-ese"></i> icn-ese</div>
			
				<div class="icons__item" data-name="estorninos"><i class="icn icn-estorninos"></i> icn-estorninos</div>
			
				<div class="icons__item" data-name="estrella"><i class="icn icn-estrella"></i> icn-estrella</div>
			
				<div class="icons__item" data-name="etiqueta"><i class="icn icn-etiqueta"></i> icn-etiqueta</div>
			
				<div class="icons__item" data-name="facebook"><i class="icn icn-facebook"></i> icn-facebook</div>
			
				<div class="icons__item" data-name="flecha"><i class="icn icn-flecha"></i> icn-flecha</div>
			
				<div class="icons__item" data-name="flechaabajo"><i class="icn icn-flechaabajo"></i> icn-flechaabajo</div>
			
				<div class="icons__item" data-name="flechaarriba"><i class="icn icn-flechaarriba"></i> icn-flechaarriba</div>
			
				<div class="icons__item" data-name="flechaizquierda"><i class="icn icn-flechaizquierda"></i> icn-flechaizquierda</div>
			
				<div class="icons__item" data-name="flickr"><i class="icn icn-flickr"></i> icn-flickr</div>
			
				<div class="icons__item" data-name="grafico"><i class="icn icn-grafico"></i> icn-grafico</div>
			
				<div class="icons__item" data-name="hedera"><i class="icn icn-hedera"></i> icn-hedera</div>
			
				<div class="icons__item" data-name="hogar"><i class="icn icn-hogar"></i> icn-hogar</div>
			
				<div class="icons__item" data-name="imagen"><i class="icn icn-imagen"></i> icn-imagen</div>
			
				<div class="icons__item" data-name="impresora"><i class="icn icn-impresora"></i> icn-impresora</div>
			
				<div class="icons__item" data-name="ingresar"><i class="icn icn-ingresar"></i> icn-ingresar</div>
			
				<div class="icons__item" data-name="jekyll"><i class="icn icn-jekyll"></i> icn-jekyll</div>
			
				<div class="icons__item" data-name="lapiz"><i class="icn icn-lapiz"></i> icn-lapiz</div>
			
				<div class="icons__item" data-name="lentes"><i class="icn icn-lentes"></i> icn-lentes</div>
			
				<div class="icons__item" data-name="less"><i class="icn icn-less"></i> icn-less</div>
			
				<div class="icons__item" data-name="libro"><i class="icn icn-libro"></i> icn-libro</div>
			
				<div class="icons__item" data-name="lupa"><i class="icn icn-lupa"></i> icn-lupa</div>
			
				<div class="icons__item" data-name="lupamas"><i class="icn icn-lupamas"></i> icn-lupamas</div>
			
				<div class="icons__item" data-name="lupamenos"><i class="icn icn-lupamenos"></i> icn-lupamenos</div>
			
				<div class="icons__item" data-name="mano"><i class="icn icn-mano"></i> icn-mano</div>
			
				<div class="icons__item" data-name="manoabajo"><i class="icn icn-manoabajo"></i> icn-manoabajo</div>
			
				<div class="icons__item" data-name="manoarriba"><i class="icn icn-manoarriba"></i> icn-manoarriba</div>
			
				<div class="icons__item" data-name="manoizquierda"><i class="icn icn-manoizquierda"></i> icn-manoizquierda</div>
			
				<div class="icons__item" data-name="mapa"><i class="icn icn-mapa"></i> icn-mapa</div>
			
				<div class="icons__item" data-name="mapamas"><i class="icn icn-mapamas"></i> icn-mapamas</div>
			
				<div class="icons__item" data-name="marcador"><i class="icn icn-marcador"></i> icn-marcador</div>
			
				<div class="icons__item" data-name="mas"><i class="icn icn-mas"></i> icn-mas</div>
			
				<div class="icons__item" data-name="menos"><i class="icn icn-menos"></i> icn-menos</div>
			
				<div class="icons__item" data-name="menu"><i class="icn icn-menu"></i> icn-menu</div>
			
				<div class="icons__item" data-name="movil"><i class="icn icn-movil"></i> icn-movil</div>
			
				<div class="icons__item" data-name="nav"><i class="icn icn-nav"></i> icn-nav</div>
			
				<div class="icons__item" data-name="navabajo"><i class="icn icn-navabajo"></i> icn-navabajo</div>
			
				<div class="icons__item" data-name="navarriba"><i class="icn icn-navarriba"></i> icn-navarriba</div>
			
				<div class="icons__item" data-name="navizquierda"><i class="icn icn-navizquierda"></i> icn-navizquierda</div>
			
				<div class="icons__item" data-name="noticias"><i class="icn icn-noticias"></i> icn-noticias</div>
			
				<div class="icons__item" data-name="ojo"><i class="icn icn-ojo"></i> icn-ojo</div>
			
				<div class="icons__item" data-name="ordenhorizontal"><i class="icn icn-ordenhorizontal"></i> icn-ordenhorizontal</div>
			
				<div class="icons__item" data-name="ordenvertical"><i class="icn icn-ordenvertical"></i> icn-ordenvertical</div>
			
				<div class="icons__item" data-name="palabra"><i class="icn icn-palabra"></i> icn-palabra</div>
			
				<div class="icons__item" data-name="parlante"><i class="icn icn-parlante"></i> icn-parlante</div>
			
				<div class="icons__item" data-name="parrafo"><i class="icn icn-parrafo"></i> icn-parrafo</div>
			
				<div class="icons__item" data-name="pc"><i class="icn icn-pc"></i> icn-pc</div>
			
				<div class="icons__item" data-name="perfil"><i class="icn icn-perfil"></i> icn-perfil</div>
			
				<div class="icons__item" data-name="prohibir"><i class="icn icn-prohibir"></i> icn-prohibir</div>
			
				<div class="icons__item" data-name="rama"><i class="icn icn-rama"></i> icn-rama</div>
			
				<div class="icons__item" data-name="refrescar"><i class="icn icn-refrescar"></i> icn-refrescar</div>
			
				<div class="icons__item" data-name="reloj"><i class="icn icn-reloj"></i> icn-reloj</div>
			
				<div class="icons__item" data-name="rss"><i class="icn icn-rss"></i> icn-rss</div>
			
				<div class="icons__item" data-name="salir"><i class="icn icn-salir"></i> icn-salir</div>
			
				<div class="icons__item" data-name="sitemap"><i class="icn icn-sitemap"></i> icn-sitemap</div>
			
				<div class="icons__item" data-name="soundcloud"><i class="icn icn-soundcloud"></i> icn-soundcloud</div>
			
				<div class="icons__item" data-name="stampa"><i class="icn icn-stampa"></i> icn-stampa</div>
			
				<div class="icons__item" data-name="subir"><i class="icn icn-subir"></i> icn-subir</div>
			
				<div class="icons__item" data-name="tablet"><i class="icn icn-tablet"></i> icn-tablet</div>
			
				<div class="icons__item" data-name="tiempo"><i class="icn icn-tiempo"></i> icn-tiempo</div>
			
				<div class="icons__item" data-name="trabajo"><i class="icn icn-trabajo"></i> icn-trabajo</div>
			
				<div class="icons__item" data-name="travesia"><i class="icn icn-travesia"></i> icn-travesia</div>
			
				<div class="icons__item" data-name="twitter"><i class="icn icn-twitter"></i> icn-twitter</div>
			
				<div class="icons__item" data-name="usuario"><i class="icn icn-usuario"></i> icn-usuario</div>
			
				<div class="icons__item" data-name="usuariomas"><i class="icn icn-usuariomas"></i> icn-usuariomas</div>
			
				<div class="icons__item" data-name="usuariomenos"><i class="icn icn-usuariomenos"></i> icn-usuariomenos</div>
			
				<div class="icons__item" data-name="usuarios"><i class="icn icn-usuarios"></i> icn-usuarios</div>
			
				<div class="icons__item" data-name="vimeo"><i class="icn icn-vimeo"></i> icn-vimeo</div>
			
				<div class="icons__item" data-name="vineta"><i class="icn icn-vineta"></i> icn-vineta</div>
			
				<div class="icons__item" data-name="visto"><i class="icn icn-visto"></i> icn-visto</div>
			
				<div class="icons__item" data-name="youtube"><i class="icn icn-youtube"></i> icn-youtube</div>
			
		</div>

		
		<div class="ligature-icons" style="display:none">
			
				abierto
			
				acto
			
				admin
			
				alarma
			
				ampolleta
			
				anuncio
			
				archivo
			
				asterisco
			
				aviso
			
				biblioteca
			
				bower
			
				calendario
			
				camara
			
				caron
			
				caronabajo
			
				caronarriba
			
				caronizquierda
			
				casiopea
			
				cerrado
			
				ciclo
			
				circulo
			
				clip
			
				codigo
			
				compartir
			
				constel
			
				corazon
			
				cruzdelsur
			
				cuadro
			
				descargar
			
				documento
			
				email
			
				engranaje
			
				enlace
			
				enlacehorizontal
			
				equis
			
				ese
			
				estorninos
			
				estrella
			
				etiqueta
			
				facebook
			
				flecha
			
				flechaabajo
			
				flechaarriba
			
				flechaizquierda
			
				flickr
			
				grafico
			
				hedera
			
				hogar
			
				imagen
			
				impresora
			
				ingresar
			
				jekyll
			
				lapiz
			
				lentes
			
				less
			
				libro
			
				lupa
			
				lupamas
			
				lupamenos
			
				mano
			
				manoabajo
			
				manoarriba
			
				manoizquierda
			
				mapa
			
				mapamas
			
				marcador
			
				mas
			
				menos
			
				menu
			
				movil
			
				nav
			
				navabajo
			
				navarriba
			
				navizquierda
			
				noticias
			
				ojo
			
				ordenhorizontal
			
				ordenvertical
			
				palabra
			
				parlante
			
				parrafo
			
				pc
			
				perfil
			
				prohibir
			
				rama
			
				refrescar
			
				reloj
			
				rss
			
				salir
			
				sitemap
			
				soundcloud
			
				stampa
			
				subir
			
				tablet
			
				tiempo
			
				trabajo
			
				travesia
			
				twitter
			
				usuario
			
				usuariomas
			
				usuariomenos
			
				usuarios
			
				vimeo
			
				vineta
			
				visto
			
				youtube
			
		</div>
		

		<h1>Usage</h1>

		<pre><code>&lt;i class=&quot;icn icn-<span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
		
		<pre><code>&lt;i class=&quot;icn&quot;&gt;<span id="name2">name</span>&lt;/i&gt;</code></pre>
		

		<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>

		<script>
		(function() {
			document.getElementById('icons').onclick = function(e) {
				e = e || window.event;
				var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
				document.getElementById('name').innerHTML = name;
				document.getElementById('name2').innerHTML = name;
			}
		})();
		</script>
	</body>
</html>