18.06.13, 20:06
0 комментарий
  Графика/PSD

Forecast Font: веб-шрифт с погодными иконками

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

Шрифт выглядит довольно неплохо, и состоит из элементов, разделенных на слои.

Иконки могут быть как монотонными, так и раскрашенными. К тому же, вы можете изменять их в размере по необходимости без потери качества.

Каков прогноз шрифт?

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

Forecast Font: веб-шрифт с погодными иконками


Приступая к работе ...

Реализация Прогноз Шрифт очень просто все, что нужно сделать в первую очередь шрифта ссылки погоды в Вашем CSS с помощью @ шрифт лицу и 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...

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

Forecast Font: веб-шрифт с погодными иконками

	/* -----Sun----- */

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


Forecast Font: веб-шрифт с погодными иконками

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


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>


Forecastfont был создан для демонстрации возможностей использования моего окончательного проекта Iconvaul.lt год. Если вам понравилась эта сделайте пожалуйста проверить его, Forecastfont все еще развивающийся проект Iconvvauly как и любые отзывы и предложения, более чем приветствуется. Если THERES любые иконки вы думаете, я пропустил (я знаю, уже некоторые из них отсутствует) или хотели бы, чтобы я включил в следующем обновлении свяжитесь здесь. Спасибо.

Исходники в архиве.

Перевод Google.

СКАЧАТЬ

Вес файла
50.11 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204