Люди, которые вырезали все иконки отдельными картинками, а потом вставляли их в нужное место HTML (да-да, именно так делали до того, как придумали иконочные шрифты), наверняка будут в восторге, от удобных и простых иконок на чистом CSS.

Всё сделано средствами CSS, вообще без дополнительных файлов, только небольшой CSS файл со списком иконок, которые отрисованы при помощи border, background и псевдоэлементов :before, :after. И это здорово для простых и маленьких проектов, в которых не хочется загружать огромные (в сравнении с этими иконками на CSS) файлы с иконочными шрифтами, или подключать свои SVG (да и сколько ещё разных вариантов сейчас есть). А тут импортировал маленький CSS файл с иконками – и всё работает.

Анимация простых иконок на чистом CSS

Кроме простоты и удобства, эти иконки можно ещё и анимировать. Это вообще бомба. Можно выбрать 2 иконки, и сделать анимацию перехода из одной иконки в другую. Выглядит не всегда аккуратно, но для многих иконок это просто круто!

Посмотреть и использовать можно вот тут: http://cssicon.space/

Понравилась или помогла статья?
Купите мне кофеКупите мне кофе