Este componente inclui uma configuração de tema que permite adicionar quantos links desejar, definir seus ícones e decidir em quais dispositivos eles aparecerão!
Nome
Descrição
header links
Lista de links com as seguintes propriedades: título, ícone, URL, visualização e destino
add whitespace
Se marcado, isso adicionará algum espaço em branco entre os ícones padrão do cabeçalho do Discourse e os ícones personalizados adicionados por meio deste componente
Svg icons
Inclua classes de ícones do FontAwesome 6 para cada ícone usado na lista.
Os ícones podem ser qualquer nome de ícone do FontAwesome 6 (gratuito) sem as partes fa-, fab-, fas- ou far-, ou uma URL para uma imagem.
Se o ícone que você deseja usar não aparecer, adicione-o à configuração svg_icons no componente. Se você adicionar novos ícones, eles precisam ser prefixados com os prefixos do FontAwesome 6, como fab, far e fas.
Estou com um problema semelhante ao que algumas pessoas mencionaram acima: o ícone não está aparecendo, mas ainda consigo clicar no botão. Fiz a alteração na configuração do ícone para que ele diga (por exemplo) “fab-facebook-f” em vez de apenas “facebook-f”. Para o Twitter e meu outro site, não tenho problemas, mas para o Facebook e o LinkedIn, ainda não está funcionando.
Consegui entender o Facebook, mas ainda não consigo acessar o LinkedIn. Além disso, existe alguma maneira de criar um ícone personalizado? Poderia fazer o upload do logotipo da minha empresa e usá-lo como ícone?
Ah, isso resolveu, de fato. Sim, super confuso. Renomear seria ótimo!
EDIT: A atualização recente também parece ter mudado ninja o nome da classe do Discord para incluir “fab-” no meio (por exemplo, se você quiser mudar a cor dos ícones; o que @OP tornaria um recurso nativo excelente — foi um pouco difícil de perceber).
mas como esse ícone não está incluído no conjunto padrão de ícones que o Discourse usa, você também precisará adicioná-lo à outra configuração no componente.
Claro, há uma seção neste tópico sobre como adicionar ícones personalizados.
Depois de configurado, você poderá usar qualquer ícone personalizado que adicionar neste componente de tema. Por favor, dê uma olhada lá e me avise se encontrar algum problema.
Fiz essa alteração, junto com algumas outras melhorias de implementação aqui
A nova atualização adiciona classes com prefixos exclusivos a cada link com base no título que você usa. Então, por exemplo, se você usar
Obrigado pela sua ajuda. Tentei usar “fab-linkedin” nas categorias “Links do Cabeçalho” e “Ícones SVG”. Como você pode ver na imagem, por algum motivo, ainda não está funcionando.
Como você é uma cliente, eu entrei no seu site, verifiquei e resolvi o problema para você. Atualizei o componente do tema e configurei as opções corretas para os ícones; agora todos devem funcionar.
Mais uma pergunta/solicitação: inicialmente, esses links abriam em uma nova aba, mas agora estão abrindo na mesma aba. A configuração já está definida como “blank”. Como posso alterar isso de outra forma?
De fato. Acidentalmente, deixei de fora o atributo target nas alterações recentes.
Nenhuma ação necessária do seu lado. Corrigi o componente e atualizei-o no seu site. Portanto, tudo deve estar resolvido agora. Obrigado por relatar o problema
Consigo fazer alguns ícones da versão 4.7.0 de Font Awesome Icons funcionarem apenas digitando um nome (por exemplo, car) na parte correta de “Links do cabeçalho”. Alguns ícones não aparecem (por exemplo, fa-comments-o). Alguns não exigem que eu use “Ícones SVG” (por exemplo, home), enquanto outros exigem (por exemplo, car).
Nenhum dos ícones da versão 5 que tentei de Find Icons with the Perfect Look & Feel | Font Awesome funcionou. Coloquei o nome com fa- em “Links do cabeçalho” e em “Ícones SVG”, mas sem efeito. Os ícones fab-facebook (etc), que já vinham por padrão, funcionam, no entanto.
O que estou fazendo de errado?
Edição: Editei o primeiro parágrafo para maior precisão.
Muito obrigado por isso, @Johani. Funciona perfeitamente e me oferece uma solução “esteticamente” agradável para o link “voltar ao site” (no meu caso).
No entanto, encontrei um problema, pois também estou usando o componente Menu hambúrguer lateral esquerdo no mobile, o que acaba quebrando tudo nessa parte do .d-header.
Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.
