Новые иконки на сайт
Иконки на сайте
Когда арсенала таблиц [UTF8][15] и библиотеки Font Awersome стало недостаточно - самое время использовать сервис Icomoon.io.
Как добавить иконки ☕
Icomoon.io даёт возможность скачивать целый пак иконок, имеет полный спектр форматов — PNG, SVG, EPS, PDF, а так же в виде шрифта. Можно выбрать из нескольких бесплатных коллекций:
-
FontAwesome как одна из таких библиотек там тоже есть, можно вытащить SVG-шки
-
IcoMoon библиотека имеет интересный набор стандартных иконок + мне нужна была заглавная для этого поста
-
SimpleIcons с максимальным охватом брендов, откуда можно взять классные иконки по тематике языка Ruby , фреймворка Rails
-
[DevIcon][19] Тут можно быстро установить в качестве иконок логотипы любых dev продуктов.
Удобно выбрать все иконки из библиотеки можно так
Можно просто скачать SVG или PNG файлы, для этого пользуемся этой кнопкой слева (обращаем внимание на настройки ) По своему опыту могу сказать, что легче менять цвет, размер, добавлять тени и т.п. если работать с иконками в формате шрифта, для этого нажимаем на Generate Font справа.
В соответствии с настройками получаем архив с собранной автоматически демкой, что бы посмотреть как можно подключать данный пак. Для этого откройте demo.html в вашем браузере
Использование SVG
Как результат, скачав и разместив файлы SVG-иконок (например в → /images/icomoon/SVG/) на своём сервере, я просто указываю путь, например так:
Ruby: "/images/icomoon/SVG/ruby.svg"
Rails: "/images/icomoon/SVG/rails.svg"
Icomoon: "/images/icomoon/SVG/IcoMoon.svg"
Теперь для постов на тему языка Ruby, фреймворка Rails или описания самого сервиса Icomoon у меня есть оформление и сразу ознакамливает с темой текста.
Более подробно о том как используется код читайте в [посте о миниатюрах][16]
Тест - Icomoon
PS
Если заинтересовала тема вставки именно SVG, вам сюда!
Проверьте так же, нет ли нужной вам иконки среди тех, которые можно реализовать с помощью чистого CSS
Пишите мне в telegram @klimovrv