
Иконки можно подключать как SVG спрайты, так и HTML тегами, подключив библиотеку на JS
Иконки можно подключать как SVG спрайты, так и HTML тегами, подключив библиотеку на JS
data-feather
с названием иконки (см. ниже), например: <i data-feather="github"></i>
feather.replace()
для замены всех элементов с атрибутом data-feather
на SVG спрайтыfeather
или feather-имя_иконки
для конкретной. Или можно добавить свои классы, например <i class="myicon" data-feather="github"></i>
1 2 3 4 5 6 |
.myicon { width: 100px; height: 100px; stroke: #337AB7; /* Цвет иконки */ stroke-width: 2; /* Толщина линий */ } |
В итоге получится так:
Более подробную информацию по работе с JS библиотекой можно посмотреть на github у разработчиков
Скачиваем нужную иконку из списка ниже или получаем ее код, а далее подключаем. Подробнее можно посмотреть в теме: Варианты установки SVG иконки
Иконки Feather на github
Сайт авторов feathericons.com
Изображение миньона выполненное на CSS
Massive Storage выполненный на SVG с CSS анимацией.
Анимированная картинка на тему "Сидим дома"
Спасибо за удобную реализацию!