Вопрос №55189 от пользователя Kirill Kozedub в проекте «Портал «Music Box»»
Добрый день! Никита, а как правильно вставлять svg иконки на кнопках? Пробовал и через <img> и <object> и через background-image, но ни в одном случае не получалось перекрасить их в белый цвет с использованием CSS. Это удалось сделать только после того, как открыл svg-файл в редакторе скопировал и вставил содержимое непосредственно в html, а затем покрасил в css:
html:
<a class="btn" href="#">
<svg viewBox="0 -28 512.001 512" xmlns="http://www.w3.org/2000/svg"><path d="m256 55.515625c-7.289062 .... 656-21.5zm0 0"/></svg>
<span>В избранное</span>
</a>
css:
.btn svg {
fill: #fff;
}
Здравствуйте
Для перекраски именно такого svg, который вставляется изображением можно воспользоваться свойством filter. Попробуйте с его помощью инвертировать цвет чёрного изображения иконки
Используйте Хекслет по максимуму!
- Задавайте вопросы по уроку
- Проверяйте знания в квизах
- Проходите практику прямо в браузере
- Отслеживайте свой прогресс
Зарегистрируйтесь или войдите в свой аккаунт
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
