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

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;
	}

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

Visto en Kabytes