Forecast Font

Colección de tipografías meteorológicas @font-face

Forecast Font

Forecast Font es una nueva web-font de «íconos» meteorológicos especial para utilizar en proyectos de  meteorología, sitios sobre pronóstico del tiempo o cosas por el estilo.

Ejemplo de uso

@font-face {
	  font-family: "iconvault";
	  src: url("iconvault_forecastfont.eot");
	  src: url("iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
	       url("iconvault_forecastfont.woff") format("woff"),
	       url("iconvault_forecastfont.ttf") format("truetype"),
	       url("iconvault_forecastfont.svg#iconvault") format("svg");
	  font-weight: normal;
	  font-style: normal;
	}

nube sol lluvia

Lo bueno es que los «íconos» son totalmente personalizables mediante CSS, y al ser en capas podemos cambiar el color de cada elemento, como pueden ver se puede especificar el color de la nube, el del sol, y el de la lluvia.

Si quieren crear un íconos de una nube soleada con lluvia como la de la derecha el ejemplo sería el siguiente:

Insertando una «Nube  con sol y lluvia»

/* -----BaseCloud----- */

	.basecloud {
	font-family: 'iconvault';
	font-size:6em;
	content: '\f105';
	position:absolute;
	color: rgb(204, 204, 204);
	}

	/* -----Showers----- */

	.icon-showers::before  {
	content: "\f104";
	position:absolute;
	color:#82b2e4;
	}

	/* -----Sunny----- */

	.icon-sunny::after {
	content: "\f101";
	color: rgb(255, 165, 0);
	position: absolute;
	}

El HTML

<ul>
	    <li class="icon-sun"></li>                        
	    <p>This is a simple Sunny icon.</p>
	</ul>

	<ul>
	    <li class="basecloud"></li>
	    <li class="icon-showers icon-sunny"></li>
	    <p>This icon shows Sunny with Showers.</p>
	</ul>

Enlace: Forecast font

LEER
Niice, un buscador de inspiración

Visto en Kabytes

Deja un comentario

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