Раньше, когда собираешь сайт, всё было просто: подключил Font Awesome — и у тебя под рукой почти все нужные иконки для ссылок на сервисы, соцсети и платформы. Сделал кнопку, поставил иконку, всё аккуратно, единообразно и без костылей.
А потом реальность поменялась. Российских сервисов стало больше, ими реально пользуются, их ставят на сайты, в интерфейсы, в каталоги, в подборки. И тут выясняется неприятная вещь: нормальных иконок для них либо вообще нет, либо они разбросаны по разным SVG, PNG и каким-то случайным исходникам. В итоге на одном сайте у тебя одна иконка шрифтом, другая через картинку, третья криво обрезана, четвёртая вообще не подходит по стилю.
И вот это, если честно, ужасно раздражает.
Особенно когда хочется просто нормально сделать блок со ссылками на сервисы — без зоопарка из разных форматов, без ручной подгонки размеров, без поиска “ну хоть какой-нибудь логотип в svg”. Раньше такие вещи решались за минуту, а теперь на ровном месте превращаются в возню.
В какой-то момент я понял, что проще уже не искать готовое решение, а сделать своё. Так появился RU Icons — иконочный шрифт с российскими брендами и сервисами. Идея очень простая: чтобы это работало примерно так же удобно, как Font Awesome. Подключил CSS одной строкой и спокойно используешь иконки VK, Яндекса, Авито, Ozon, Rutube и других прямо через span, как обычный иконочный шрифт. Сейчас на сайте указано, что в наборе 21 иконка, 13 платформ и 8 цветных вариантов, а в версии 1.2 добавлены новые иконки Яндекс Еды, Яндекс Видео, Яндекс Диска и Яндекс Маркета.
Сделал в первую очередь для себя, потому что мне самому этого очень не хватало в работе. Но, думаю, я точно не один, кто с этим сталкивается. Если вы тоже верстаете сайты, интерфейсы, каталоги сервисов или просто устали вручную собирать логотипы по разным папкам, возможно, эта штука тоже вам пригодится.
Сайт проекта: RU Icons. Там есть список всех иконок, документация и архив для скачивания. В архиве лежат ruicons.css и файлы шрифта в форматах woff2, woff, ttf и otf, а лицензия MIT.
Как пользоваться иконками
На сайте всё устроено максимально просто: скачиваете архив, кладёте файлы шрифта в проект, подключаете ruicons.css в <head> и дальше используете иконки через <span class="ri">...</span>. Для цветных версий добавляется класс palette0. Размер меняется обычным font-size, как у текста.
Проект на github https://github.com/isay777/ruicons
Прикрепленные изображения
Сообщение отредактировал isay777: Сегодня, 12:09
Вопрос решен
