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.
I’m having a similar issue as a few people mentioned above where the icon is not showing, but I can still click the button. I made the edit to the icon setting so that it says (for instance) “fab-facebook-f” rather than just “facebook-f”. For Twitter and my other website, I have no issues, but for Facebook and LinkedIn, it’s still not working.
I figured out Facebook, but still can’t get LinkedIn. Also, is there any way to make a custom icon? Could I upload my company’s logo and use it as an icon?
Ah this resolved it, indeed. Yep - super confusing. Rename would rock!
EDIT: Recent update also seemed to ninja change discord’s class name to include fab- in between it (eg, if you’re wanting to change the icons color; which @OP would make a great native feat - was a bit hard to catch).
but since that icon is not included in the default set of icons that Discourse uses, you will also need to add it to the other setting in the component.
Sure, there’s a section in this topic about adding custom icons.
Once you have that setup, you’ll be able to use any custom icons you add in this theme component. Please have a look there and let me know if you run into any issues.
I’ve made that change along with a couple of other implementation improvements here
The new update adds unique prefixed classes to each link based on the title you use. So, for example if you use
Thank you for your help. I tried using “fab-linkedin” in both the “Header Links” and “Svg Icons” categories. As seen in the picture, it is still not working for whatever reason.
The grey circle is where the LinkedIn logo would be. Any other ideas how to fix it?
Since you are a customer, I went in and had a look at your site and fixed the issue there for you. I updated the theme component and set the correct settings for the icons, they should all work now.
One more question/ request; I initially had these links opening in a separate tab, but now they are opening in the same tab. The setting is already set to “blank”, how else can I change this?
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.
