Как изменить цвет значков с помощью CSS

Множество способов динамически раскрашивать значки веб-сайтов

Почти на каждом веб-сайте есть значки, которые меняют цвет, когда вы наводите на них курсор или активируете функцию. Старый добрый способ добиться этого - поменять местами изображения. Для этого нам нужно создать два изображения с одним и тем же значком, но разных цветов и поменять местами их с помощью javascript:

<img src=”my_image.png” id=”my_image”>
<script>
    var myImage = document.getElementById("my_image");
    myImage.onmouseover = mouseOver;
    myImage.onmouseout = mouseOut;
    
    function mouseOver() { 
      myImage.src = "my_image_active.png";
    }
    function mouseOut() { 
      myImage.src = "my_image.png";
    }
</script>

Как это сделать с помощью CSS и фоновых изображений

Используйте ‹DIV› или ‹P› или любой другой элемент по вашему выбору и установите фоновое изображение:

html:
<div class="my_image"><div>
CSS:
.my_image {
  width: 100px;
  height: 100px;
  background-image: url(my_image.png);
  background-repeat: no-repeat;
  background-position: center;
}
.my_image:hover {
  background-image: url(my_image_active.png);
}

Нам по-прежнему нужны два изображения, но код намного проще.

Изменение более чем двух цветов

Методы, которые я показал, работают хорошо, но что, если нам нужно использовать три или даже больше цветов для наших значков? Просто подумайте о веб-сайтах, где пользователи могут выбирать между несколькими цветовыми темами. Конечно, мы можем создать много изображений, и каждый раз, когда клиент хочет их изменить, мы можем воссоздать все изображения.

Но что, если бы мы могли добиться этого с помощью простого цвета фона CSS?

Сначала мы делаем изображение прозрачным и просто заливаем его фон, скажем, белым.

HTML:<img src="my_image_inverse.png" id="my_image" />
CSS:
#my_image (
  background-color: red;
}
#my_image:hover (
  background-color: blue;
}

Что делать, если цвет фона нашей страницы изменится?

Работая над своим последним проектом, я столкнулся с этой проблемой. Я создал веб-сайт, имитирующий мобильное приложение для клиентов B2B.

У клиентов должна быть возможность подобрать цвета каждого элемента приложения в соответствии со своим корпоративным дизайном. После того, как все цвета зафиксированы, разработчики приложения копируют цветовые коды в исходный код приложения для его компиляции.

Таким образом, цвет значков и фона можно настроить на любое из более чем 16 миллионов значений. Моей задачей было найти решение, охватывающее все варианты. После долгих размышлений я нашел решение:

SVG - это ответ!

Все, что вам нужно сделать, это встроить код SVG в свой HTML, дать ему имя класса CSS и использовать свойство CSS fill:

HTML:
<div>
  <svg class="myIcon" >
    <path d="M0,0h10.195v7.828L8.227,23.555H1.922L0,7.828V0z     M0.352,25.945h9.516v8.414H0.352V25.945z"/>
  </svg>
</div>
CSS:
.myIcon {
  fill: red;
}

Теперь вы можете использовать javascript для изменения значения цвета, например. с помощью палитры цветов или собственного скрипта.

Примечание: это не сработает, если вы используете тег IMG для SVG. Вы не сможете изменить цвет SVG, если сделаете это следующим образом:

<img src="my_icon.svg" class="myIcon" />

Другой способ изменить цвет значка

Если у вас есть набор шрифтов для ваших значков, например шрифт Awesome или шрифт Googles Material, это очень просто: добавьте шрифт и соответствующую таблицу стилей и вставьте код для значка в свой HTML:

HTML:
<i class="fa-solid fa-my-icon"></i>
CSS:
.fa-my-icon {
  color: red;
}

Надеюсь, вы сможете использовать один из вариантов, показанных здесь, для своих собственных веб-проектов.

Удачного кодирования!