Ícone / Emoji do Item de Navegação do Discourse

[Don]

	Resumo	Adicionar Ícone / Emoji antes do item de navegação
	Repositório	GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo em Temas do Discourse?	Guia para iniciantes no uso de Temas do Discourse

Instalar este componente de tema

Olá

Com este componente de tema, você pode adicionar um ícone ou emoji antes dos itens de navegação. O componente de tema é baseado em Discourse Easy 'SVG Icon' and 'Emoji' in CSS.

nav item prefix

Esta configuração pode lidar com ícones e emojis também.

A regra que você deve seguir é:

Ícone

Se você quiser adicionar um ícone antes de um item de navegação:
icon:nav-item:icon-set:icon-name:icon-color

Primeiro, você deve definir o tipo que é icon se quiser adicionar um ícone antes do item de navegação.

• nav-item: latest, hot, new, unread, categories etc…
• icon-set: brands, regular, solid
• icon-color: currentColor, HEX ou variável de cor

Por exemplo:
icon:latest:solid:rocket:currentColor
icon:top:regular:star:var(--gold)
icon:unseen:solid:compass:#228C22

---

Emoji

Se você quiser adicionar um emoji antes de um item de navegação:
emoji:nav-item:emoji-set:emoji-name:filter

Primeiro, você deve definir o tipo que é emoji se quiser adicionar um emoji antes do item de navegação.

• nav-item: latest, hot, new, unread, categories etc…
• emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
• filter: Isso torna o emoji preto no modo claro e branco no modo escuro. Se o emoji for passado o mouse ou ativo, ele será revelado com uma transição. (opcional)
  

Por exemplo:
emoji:latest:twitter:rocket:filter
emoji:top:google:star
emoji:new:facebook_messenger:bell

Navegação do Desktop

Navegação Móvel

[davidkingham]

Muito legal, Don. Há alguma esperança de fazer isso funcionar com o FontAwesome Pro? Eu uso ícones leves…

[Don]

Sim, acho que isso é possível, mas infelizmente não tenho acesso ao conjunto de ícones pro. Ele funciona com ícones SVG, então se você tiver acesso a isso, deve funcionar. É necessário modificar um pouco o componente e adicionar esses SVGs. Depois disso, você pode usá-lo com as configurações. E também é importante qual é o uso legal do SVG de ícones pro no site, o que não tenho certeza.

[Aaron_Walsh]

Por que não há um discurso de acompanhamento ? Cada tópico que você cria, eu quero uma notificação!, como o termo chama… VOCÊ ARRASOU!

[sheng_hualuo (花落晓斩神)]

Após atualizar o Discourse, o terminal móvel não exibe o ícone, o que causa confusão. Alguém está na mesma situação que eu??

[Lilly (Lillian Louis)]

Parece a visualização de desktop na sua captura de tela (a julgar pelo ícone de hambúrguer no canto esquerdo), mas o componente está funcionando para mim no celular.

[Aaron_Walsh]

Concordo com o que @sheng_hualuo está dizendo sobre a nova navegação (dropdown); ela não aparece.

[Lilly (Lillian Louis)]

Ah, eu também vejo no menu suspenso.

[Don]

Sim, desculpe, este componente de tema e os meus outros que modificaram a barra de navegação precisam de uma atualização desde esta alteração DEV: replace list control nav dropdown with DMenuMobile (#28324) · discourse/discourse@931485b · GitHub. Pensarei numa solução. Podemos direcionar facilmente os itens de navegação no modal, mas o selecionado infelizmente não tem uma classe específica e acho que teremos que descartar as navegações de desktop dos componentes.

[Don]

Olá

Fiz uma atualização neste componente.

1. remove a versão de navegação desktop no celular
2. adiciona compatibilidade à nova navegação mobile

Infelizmente não podemos adicionar aqui, pois esta seção não possui uma classe específica para item de navegação.

DEV: fixes compatibility to the new mobile navigation

[sheng_hualuo (花落晓斩神)]

Muito obrigado pelo conserto, mas sinto muito que o recurso da versão para desktop tenha sido removido, pois fica ótimo com meu site.