Вопрос №55189 от пользователя Kirill Kozedub в проекте «Портал «Music Box»»

Kirill Kozedub

Добрый день! Никита, а как правильно вставлять 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; }

1 0

Nikita Mikhaylov

Здравствуйте

Для перекраски именно такого svg, который вставляется изображением можно воспользоваться свойством filter. Попробуйте с его помощью инвертировать цвет чёрного изображения иконки

0

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
25 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
25 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
25 мая 5 месяцев