Как сделать иконки SVG в навигационной панели белыми?

Разработка
1

Привет. Я использую компонент Custom Header Icons.
wwww

Хотелось бы, чтобы они были белыми.

2

Похоже, компонент использует элемент с классом custom-header-icon-link для размещения каждого значка. Если вы используете SVG-значки, вы можете обратиться к ним следующим образом:

.custom-header-icon-link svg {
    stroke: white;
}

Иногда SVG-изображения выглядят так, будто они состоят из линий, но на самом деле они созданы из залитых фигур, поэтому, возможно, вам потребуется заменить stroke: white на fill: white.

3

Привет, я попробовал оба варианта, но они всё равно выглядят так:
wwww
С предоставленным вами CSS никаких изменений не произошло.

5

Хм, не совсем понятно, что там происходит! Возможно, стоит перепроверить, что иконки — это SVG, а не обычные изображения. Также можно попробовать добавить stroke: white !important; на случай, если какое-то другое правило стилей перебивает это.

Один из способов «проверки на здравый смысл», который я люблю использовать при работе с CSS, когда кажется, что ничего не работает, — это добавить цвет фона к селектору.

.custom-header-icon-link svg {
  background-color: pink;
  stroke: white;
}

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

В Chrome можно нажать ctrl+shift+c и кликнуть по иконке, чтобы она автоматически выделилась в списке элементов. Если вы хотите сделать скриншот вкладки с элементами, мы сможем посмотреть, как всё организовано. Например, вот как это выглядит у меня, когда я пробую компонент в режиме предпросмотра:

image
image424×184 18.5 KB

6

Попробую это, когда вернусь домой. Пытаюсь заставить это работать уже около 8 часов :upside_down_face: background-color был одним из параметров, которые я пробовал ранее, и я без остановки возился с Inspect Element, но всё равно не получилось. Попробую добавить «important» позже, когда буду дома через несколько часов, и оставлю обновление! И да, это на 100% ссылки на .SVG.

7

Ох, звучит неприятно!

Ещё один полезный приём для отладки — добавить стили напрямую к элементу в инспекторе, чтобы проверить, сработает ли это (используя раздел element.style во вкладке Styles). Примечание: это временные изменения, которые действуют только в текущем окне и удаляются при обновлении страницы.

image
image592×155 21.2 KB

8

Вот мои иконки, и вот их код через «Inspect Element»:

bbbb
bbbb720×375 20.8 KB

Я пробовал все CSS-правила, которые вы перечислили, применяя как «stroke», так и «fill». Свойство «!important» тоже не сработало. Не понимаю, в чём причина.
Однако, возможно, я наткнулся на что-то важное. Я заметил, что, хотя я использую SVG-изображения, в «Inspect Element» они отображаются в теге , а не в теге , как у вас. Не является ли это ошибкой плагина Custom Header Icons?

9

Ага, да, похоже, именно поэтому изменения не давали эффекта — реального тега нет. Я не думаю, что это ошибка компонента, который поместил их в тег . Это просто один из способов отображения SVG, но он затрудняет их стилизацию. Если у вас есть доступ к самим SVG-файлам, вы можете изменить цвет обводки или заливки прямо там (это будет атрибут вроде stroke=“black”, и таких атрибутов может быть несколько).

Если вы не можете редактировать SVG, попробуйте использовать CSS-фильтры. Они позволяют добавлять определённые визуальные эффекты к элементам. Поскольку они сейчас выглядят чёрными, можно попробовать инвертировать цвета, чтобы получить белый:

.custom-header-icon-link img {
  filter: invert(100%);
}

Обратите внимание: селектор теперь должен указывать на img, а не на svg