Набор контурных иконок на разные темы
Опубликовано: 01.09.2018
Следуя тенденциям современного дизайна, контурные иконки пользуются большим спросом. Они применяются на веб-сайтах, в приложениях, программах и весьма неплохо сочетают в себе стиль и корректную видимость. На любом фоне линейные иконки хорошо видны, тем самым привлекают к себе внимание.
Мы рассмотрим небольшую сборку иконок, которую можно использовать как иконочный шрифт или как обычные png иконки. Шрифт, естественно, имеет преимущество перед картинками, так как изменение цвета, размера происходит через правила CSS.
Иконочный шрифт
Первая коллекция состоит из 730+ контурных иконок, которая включает в себе формат SVG, PNG и шрифтовой вариант.
Чтобы использовать иконки как шрифт нужно из архива достать папку fonts и загрузить ее на свой сервер (для WordPress в свою тему оформления). Затем подключить шрифт через файл стилей CSS, таким образом:
@font-face { font-family: "linea-weather-10"; src:url("fonts/linea-weather-10.eot"); src:url("fonts/linea-weather-10.eot?#iefix") format("embedded-opentype"), url("fonts/linea-weather-10.woff") format("woff"), url("fonts/linea-weather-10.ttf") format("truetype"), url("fonts/linea-weather-10.svg#linea-weather-10") format("svg"); font-weight: normal; font-style: normal; }Дальше просто прописываете через псевдоэлемент :before или :after в свойстве contetnсимвол иконки. И не забываем указывать семейство шрифта, выглядит это вот так:
.icon1:before{ font-family: "linea-weather-10"; content: ""; color:red; font-size:32px; padding-right:10px; }Линейные иконки в формате PSD, AI
Следующая подборка состоит только в графическом формате, что допускается редактирования через специальные программы. Иконки расположены на фоне с динамической тенью, весьма стильный и современный дизайн.
Экспериментальные иконки (18+)
Последняя коллекция иконок из 45 штук носит характер грубости и оттенка жестокости, но все же может кому-то пригодится.
