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 для создания одноцветной иконки и более сложных иконок с несколькими цветами.

forecast font
.icon-sun::after {
	content: "\f113";
	color: rgb(255, 165, 0);
	position: absolute;
	
}
forecastfont
.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>

СКАЧАТЬ

 

Перевод статьи Forecast Font

Тэги: Iconfont

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.