Adicionando ícones em vez de texto

Contribuir Experiência do Usuário
1

Este plugin é incrível — não sou muito bom com plugins, então não sei como criar uma versão baseada nele, mas sinto que o Discourse tem uma sensação agradável de “simplicidade” — seria ótimo ter suporte a imagens/ícones.

Aqui está uma solução meio gambiarra de como consegui adicionar o ícone do Discord:

image
image281×100 5.1 KB

(Menos a saturação de cor — bugs de captura HDR são os piores)

image

Depois de instalado, crie um novo componente CSS ou edite o tema diretamente:

Aqui está o que eu usei:

.headerLink
{
    color: white;
    
    &.d
    {
        background-image: url('https://i.imgur.com/MSef433.png');
        background-repeat: no-repeat;
        background-size: 22px;
        
        a
        {
            color: rgba(0, 0, 0, 0);
            text-decoration: none;
            &:hover
            {
                box-shadow: 0px 2px lightgray;
            }
        }
    }
}
  • Tive problemas com efeitos de hover, então uma sombra inferior ao passar o mouse foi o melhor que consegui, já que são imagens e não caracteres Unicode:

image

  • Nomeei o exemplo acima como d porque é preciso dar um nome a algo. Fiz a opacidade da fonte zero para escondê-la, mas o d me permite usar a classe d.

  • Existe uma maneira melhor de fazer isso? Provavelmente. Mas essa é a solução gambiarra para trazer ideias à tona até que algo melhor surja :slight_smile:

2 curtidas
2

Primeiramente, isso é um componente de tema, não um plugin. É melhor especificar isso antes que os usuários fiquem confusos e tentem instalá-lo como um plugin.

A segunda questão é: por que você usa esse componente de tema em vez de Custom Header Links (icons), que serve ao propósito de adicionar ícones ao menu? :open_mouth:

6 curtidas
3

Pois é, por isso que não fiz um componente — ainda estou aprendendo os termos.

Porque não é legal o suficiente para aparecer naquela lista de componentes de instalação por link preguiçoso, imagino ;D Se os links de texto devem estar lá, gostaria que os ícones também estivessem! Ficou muito legal. Vou dar uma olhada agora.

EDIT: Funciona maravilhosamente.

3 curtidas