Ребята из Iconvault сделали потрясающий веб-шрифт для создания многослойных иконок погоды.
Главное преимущество данного шрифта — полная масштабируемость его символов, что позволяет с легкостью использовать его на любых устройствах и платформах.
Как использовать
Скачиваете архив и в 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; }
Теперь, чтобы вывести на странице солнце, достаточно в HTML создать тег с классом icon-sun
:
<span class="sun"></span>
и в CSS написать:
.icon-sun::after { content: "f113"; color: rgb(255, 165, 0); position: absolute; }