Íconos alineados con el texto

Los íconos de Stampa pueden ser usados en cualquier parrafo usando la etiqueta &lti&gt o &ltspan&gt para tener un HTML válido para todos los navegadores. Se recomienda el uso de &ltspan&gt ya que la etiqueta &lti&gt podría definir atributos tipográficos conflictivos si se trabaja dentro de un framework más complejo.

Caso 1: Etiqueta vacía con una clase específica

<span class="icn icn-acto"></span>

Caso 2: Ligadura con la clase genérica

acto

<span class="icn">acto</span>

Íconos de mayor tamaño

A los íconos se les puede incorporar las clases sm md lg y xl; que varían su tamaño en relación con el parrafo en que se encuentra.

icn-acto
icn-acto
icn-acto
icn-acto

<span class="icn icn-acto icn-sm"></span> icn-mano arriba <span class="icn icn-acto icn-md"></span> icn-mano arriba <span class="icn icn-acto icn-lg"></span> icn-mano arriba <span class="icn icn-acto icn-xl"></span> icn-mano arriba

Íconos enumeradores

Se incluye dentro de los usos de los íconos en listas ordenadas de elementos. Incorporando las clases icn-ul e icn-li se reemplazan las viñetas.

<ul class="icn-ul"> <li><span class="icn icn-li icn-visto"></span>icn-visto</li> <li><span class="icn icn-li icn-visto"></span>icn-visto</li> <li><span class="icn icn-li icn-equis"></span>icn-equis</li> </ul>

Íconos capitales

Usando las clases icn-border, que bordea el ícono, en conjunto con pull-left o pull-right, se obtiene como resultado un elemento que sirve para iniciar parrafos y darles un cierto carácter.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at mi varius, lobortis felis id, interdum enim. Proin tempus sollicitudin sagittis. Pellentesque ut gravida erat. Sed ut dolor sodales, semper justo nec, fringilla arcu. Maecenas consequat lectus odio, ut convallis erat tincidunt mattis. Vestibulum et dolor maximus lectus ultrices convallis quis sit amet libero. Phasellus rhoncus dolor vel nunc tincidunt, sed blandit est vestibulum. In ac sapien leo. Vivamus gravida mattis nunc in tristique. Praesent at libero dolor.

<p><span class="icn icn-acto icn-2x pull-left icn-border"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at mi varius, lobortis felis id, interdum enim. Proin tempus sollicitudin sagittis. Pellentesque ut gravida erat. Sed ut dolor sodales, semper justo nec, fringilla arcu. Maecenas consequat lectus odio, ut convallis erat tincidunt mattis. Vestibulum et dolor maximus lectus ultrices convallis quis sit amet libero. Phasellus rhoncus dolor vel nunc tincidunt, sed blandit est vestibulum. In ac sapien leo. Vivamus gravida mattis nunc in tristique. Praesent at libero dolor.</p>

Íconos rotados y volteados

Usando las clases icn-rotate- e icn-flip- se puede modificar la dirección y el sentido del ícono.

La dirección del ícono se puede modificar agregando al final de la clase la cantidad de ángulos que se desea rotar. De modo que las clases icn-rotate-90, icn-rotate-180 e icn-rotate-270 van cambiando la dirección del ícono.

Las clases icn-flip-horizontal e icn-flip-vertical hacen un efecto espejo sobre el ícono en el sentido correspondiente.

normal
icn-rotate-90
icn-rotate-180
icn-rotate-270
icn-flip-horizontal
icn-flip-vertical

<span class="icn icn-imagen"></span> normal <span class="icn icn-imagen icn-rotate-90"></span> icn-rotate-90 <span class="icn icn-imagen icn-rotate-180"></span> icn-rotate-180 <span class="icn icn-imagen icn-rotate-270"></span> icn-rotate-270 <span class="icn icn-imagen icn-flip-horizontal"></span> icn-flip-horizontal <span class="icn icn-imagen icn-flip-vertical"></span> icn-flip-vertical

Íconos giratorios

Mediante una animación CSS3, la clase icn-spin permite que cualquier ícono gire (funciona de mejor manera con aquellos circulares).

icn-engranaje
icn-ciclo

<span class="icn icn-engranaje icn-spin"></span> icn-engranaje <span class="icn icn-ciclo icn-spin icn-lg"></span> icn-ciclo

Íconos apilados

Se pueden apilar iconos de Stampa usando la clase icn-stack dentro de la etiqueta agrupadora &ltspan&gt, seguida por los íconos que se desean agrupar.

Para los íconos, se pueden usar las clases icn-stack-1x para el ícono de menor tamaño e icn-stack-2x para el de mayor, de manera que no se sobrepongan entre ellos.

Se incluye la clase icn-inverse la cual cambia el color de relleno del ícono a su opuesto, siendo en este caso el blanco, de manera que se pueda sobreponer un ícono en uno con relleno.

<span class="icn-stack"> <span class="icn icn-cuadrolleno icn-stack-2x azul"></span> <span class="icn icn-facebook icn-stack-1x icn-inverse"></span> </span> <span class="icn-stack"> <span class="icn icn-cuadrolleno icn-stack-2x rojo"></span> <span class="icn icn-travesia icn-stack-1x icn-inverse"></span> </span> <span class="icn-stack"> <span class="icn icn-circulolleno icn-stack-2x naranja"></span> <span class="icn icn-rss icn-inverse icn-stack-1x"></span> </span>

Por último, en la etiqueta &ltspan&gt se pueden combinar más clases, como por ejemplo, icn-stack icn-lg para hacer una agrupación de una escala mayor.

<span class="icn-stack"> <span class="icn icn-circulolleno icn-stack-2x"></span> <span class="icn icn-lupa icn-inverse icn-stack-1x"></span> </span> <span class="icn-stack icn-lg"> <span class="icn icn-circulolleno icn-stack-2x"></span> <span class="icn icn-lupa icn-inverse icn-stack-1x"></span> </span>

Área de Pruebas

Este espacio opera con la tipografía Web Stampa. Escribe los nombres de los íconos; no verás las letras, pero al completar el nombre aparecerá el caracter correspondiente:

Regular

Ligera