Lecaw

Учимся создавать Web-сайты

Forecast Font – веб-шрифт для создания иконок погоды

June 5, 2013 88hits

Forecast Font - веб-шрифт для создания многослойных иконок погоды. Он был создан, чтобы вы могли контролировать внешний вид иконок, а не использовать только один цвет или стиль. С плоскими, одноцветными иконками вы можете изменить цвет, стиль или даже анимировать различные части иконок. Еще они полностью масштабируемы, это позволяет с легкостью использовать их на любых устройствах, нет необходимости создавать громоздкие спрайты изображений или использовать несколько изображений для создания иконок погоды.

 Исходные файлы

 

Реализация веб-шрифта Forecast Font очень проста, в первую очередь нужно добавить ссылки веб-шрифта Forecast Font в Вашем CSS файле с помощью элемента @font-face и подключить CSS файл к вашему документу.

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

Вот несколько примеров, показывающих как использовать CSS для создания одноцветной иконки и еще более сложных иконок с несколькими цветами.

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

.basecloud {
	font-family: 'iconvault';
	font-size:6em;
	content: '\f105';
	position:absolute;
	color: rgb(204, 204, 204);
	}
	
	.icon-showers::before  {
	content: "\f104";
	position:absolute;
	color:#82b2e4;
	}
	
	.icon-sunny::after {
	content: "\f101";
	color: rgb(255, 165, 0);
	position: absolute;
	}

Веб-шрифт Forecast Font иконки очень легко подключить к вашему проекту. Ниже привожу пример 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>

 Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(3 голосов)

Оставить комментарий