Como tornar os ícones SVG da Navbar brancos?

Dev
1

Olá. Estou usando Ícones Personalizados no Cabeçalho.
wwww

Gostaria que estes fossem brancos.

2

Parece que o componente usa um elemento com a classe custom-header-icon-link para conter cada ícone. Se você estiver usando ícones svg, poderá direcioná-los assim:

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

Às vezes, os svgs parecem ser feitos de linhas, mas na verdade são feitos de formas preenchidas, então você pode precisar mudar stroke: white para fill: white.

1 curtida
3

Olá, tentar ambos ainda os deixa assim:
wwww
Com o CSS que você forneceu, nenhuma alteração ocorreu.

5

Hmm, não tenho certeza do que está acontecendo aí! Você pode verificar novamente para ter certeza de que os ícones são SVGs e não arquivos de imagem. Você também pode tentar stroke: white !important; caso haja algum outro estilo substituindo-o.

Um ‘teste de sanidade’ que gosto de fazer com CSS quando ele não parece estar fazendo nada é adicionar uma cor de fundo ao seletor.

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

Dessa forma, se você não vir a cor de fundo, o problema pode ser que o seletor não esteja visando o elemento certo. Neste caso, a ferramenta de inspeção do navegador é muito útil porque você pode olhar a hierarquia dos elementos e ter uma ideia melhor de como o seletor deve ser escrito.

Com o Chrome, você pode pressionar Ctrl+Shift+C e clicar no ícone para que ele pule para esse elemento na lista. Se você quiser postar uma captura de tela da guia de elementos, podemos dar uma olhada em como as coisas estão organizadas. Por exemplo, é assim que parece para mim quando tento o componente em visualização:

image
image424×184 18.5 KB

6

Vou tentar isso quando voltar para casa. Tentei fazer isso funcionar por umas 8 horas :upside_down_face: a cor de fundo foi uma das coisas que tentei mais cedo e mexi no Elemento de Inspeção sem parar, mas ainda não funcionou. Tentarei a coisa do “important” mais tarde, quando estiver em casa em algumas horas, e deixarei uma atualização! E sim, são 100% links .SVG.

7

Ah cara, parece frustrante!

Outra técnica que pode ser útil para solucionar problemas é adicionar estilos diretamente ao elemento no inspetor para ver se funciona (usando a parte element.style da guia de estilos). Observação: essas são alterações temporárias que afetam apenas a janela atual e são excluídas quando você atualiza.

image
image592×155 21.2 KB

8

Aqui estão meus ícones e aqui está o Elemento Inspecionar para eles:

bbbb
bbbb720×375 20.8 KB

Eu tentei todo o código CSS que você listou, tanto tentando “stroke” quanto “fill”. A coisa do “!important” também não funcionou. Não tenho ideia do que está causando isso.
No entanto, acho que posso ter tropeçado em algo. Notei que, embora eu esteja usando “imagens” .SVG, o Elemento Inspecionar ainda as está mostrando em uma tag <img> versus o <svg class=" que o seu mostra. Isso é um bug com Ícones Personalizados de Cabeçalho?

9

Aha, sim, parece que é por isso que as alterações não estavam fazendo nada - não há uma tag <svg> real. Não acho que seja um bug o componente colocá-la em uma tag <img>. Essa é apenas uma das maneiras de exibir um SVG, mas torna mais difícil estilizar. Se você tiver acesso aos próprios arquivos SVG, poderá alterar a cor do traço ou do preenchimento lá (seria um atributo como stroke="black", e pode haver mais de um).

Se você não puder editar o SVG, poderá tentar usar filtros CSS. Eles permitem adicionar certos efeitos visuais a um elemento. Como agora parecem ser pretos, poderíamos tentar invertê-los para obter branco.

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

Observe que o seletor agora precisa ser img em vez de svg

2 curtidas