Links de cabeçalho personalizados (ícones)

Oh my - that did the trick, thank you so much!
I tried “building” just in the theme component (didn’t work) and “fas-building” in both places (didn’t work) but it didn’t cross my mind to try the plain version in both fields.

I still would suggest to make this differene between fa(s) and fab/far more clear in the component description.

2 curtidas

Hello.
Thanks for the great plugin.

I would be grateful if you could provide one support.

I have a Login Required setting on my Discourse.
When I visit a site with this setting, I am naturally asked to create an account or log in, and the header shows an icon that I created with this plugin.

image
Need account or login page(in Japanese)

If that’s all there is to it, there’s no problem, but if you click on them, you will be able to open the linked page without logging in.
(The link is to a plugin that I created myself, and the Path is a path directly under the site root, such as /test_path. Even with this path, if you specify the URL directly, etc., you will be asked to create an account or log in. Only if you go through the header icon of this plugin, the page will be displayed without login).

The best solution is to not show the icon in the first place, but at the very least, you need to be able to click on the icon to see the page that asks you to log in.

I would really appreciate it if you could help me with a solution. Thank you very much.

1 curtida

Hey @Johani. It looks like this needs to be updated for the new way theme variables work. I see this error in the admin panel:

Error: Undefined variable: "$add-whitespace". on line 14 of common.scss >> @if $add_whitespace == "true" { ----^
3 curtidas

Hello,

I’m linking to a limited access page, where I need to pass in some variables to the url. Would it be possible to get some system variables like username, userid, mail etc?

1 curtida

I am looking for the same thing. I want to post the logged-in user’s username to a remote server when the header icon is clicked. I understand that I can get the username via javascript, but I am not sure how I can do so this via a header icon:

<script type="text/discourse-plugin" version="0.8">
const username = api.getCurrentUser().username;
</script>

Thanks!

1 curtida

Apenas um aviso, notei um bug nas instruções de Configurações de Tema.

O topo diz que a ordem é título, ícone, URL, visualização, destino.

Mas a parte inferior diz que a ordem é título, ícone, visualização, URL, destino

O de cima está correto, em que a URL vem antes da visualização.

Veja abaixo a captura de tela:

3 curtidas

Acabei de fazer um PR para isto:

5 curtidas

Obrigado! Suponho que um dia aprenderei como e terei coragem de fazer um PR :smiley:

3 curtidas

Existe uma maneira de indicar a posição do ícone? Estou usando um ícone personalizado, mas tenho o chat e outro ícone de componente de tema no mesmo cabeçalho e quero definir o ícone personalizado ao lado do ícone de pesquisa.

Olá a todos!

Obrigado pelo incrível Componente de Tema! Embora eu tenha encontrado um pequeno problema: alguns ícones funcionam bem, por exemplo, fa-rocket, mas outros não aparecem, por exemplo, fa-rocketchat, embora eu ache que tenho todas as classes de ícones necessárias instaladas. Alguma ideia do que está causando isso? Agradeceria muito :slight_smile:

Além disso: como posso obter ícones Font Awesome regulares em vez dos sólidos? Tentei incluir far-iconname e fa-regular, mas isso não parece funcionar…

Provavelmente devido a isto

Para a primeira parte da sua pergunta. Posso estar errado, mas tente adicionar o ícone do rocket chat ao seu svg icon subset nas configurações do site.

1 curtida

Infelizmente, isso não resolve o problema para mim.

O Link do Cabeçalho é:

Rocket.Chat,rocket,https://chat.domain.de,vdo,blank

Em Ícones Svg nas Configurações do Componente de Tema e Subconjunto de ícones Svg nas Configurações Principais do Discourse, adicionei fa-rocketchat e fa-brands, conforme detalhado na descrição do ícone Font Awesome. Ele é suportado desde a versão 5.0.0 do FA, então não pode ser isso…

Alguém tem alguma ideia e pode me ajudar? :slight_smile:

Você precisa:

  1. Adicionar fab-rocketchat a svg icon subset.
  2. Alterar Header links para Rocket.Chat,fab-rocketchat,https://chat.domain.de,vdo,blank.

As instruções são enganosas, mas, olhando para trás, provavelmente não estão incorretas:

A parte difícil é que você tem que converter fab fa-rocketchat (no site do Font Awesome) para fab-rocketchat (no Discourse).

2 curtidas

Existe uma maneira de adicionar ícones SVG que eu faço upload para o meu site? (Sem usar os do site Font Awesome)

Estou quebrando a cabeça com algo que não sei como resolver!

Eu uso o ícone “headset” e consigo usá-lo normalmente

rocket | Font Awesome

mas quando quero usar o ícone “light headset” não consigo usá-lo de forma alguma

rocket | Font Awesome

Já tentei com ‘fab-’ ‘fas-’ ou ‘far-’ já tentei sem, já coloquei o nome na parte do SVG, já tentei de tudo, mas não consigo usá-lo

[image]
o mesmo com o ícone do google play store, não consigo usá-lo e de jeito nenhum

rocket | Font Awesome

por que isso acontece?

Pode ser que a versão clara seja um ícone “pro”:

Para usar o estilo claro de “headset“, você precisará de uma assinatura de um plano de nível Pro ou de uma licença Pro perpétua que inclua a versão específica do Font Awesome na qual este ícone (ou estilo) foi lançado.

1 curtida

Também adoraria saber. Quero incluir um ícone do Letterboxd (em algum lugar na web, já foram feitos e propostos para o fontawaseome mas não aceitos)

Você pode adicionar seus próprios ícones SVG com um tema:

2 curtidas

Como faço para colocar os ícones na parte inferior do site (no modo mobile) que apareçam iguais para todos?

Por exemplo: o botão de linha do tempo aparece na mesma posição para todos os diferentes modelos de celulares e sistemas mobile.

Agora quando uso CSS para deixar o menu de botões do cabeçalho na parte inferior, em alguns celulares eles aparecem na posição certa, em outros a posição aparece um pouco para cima, em outros um pouco para o lado, por que isso acontece?

mais uma dúvida, existe uma forma de eu colocar um ícone que ao clicar nele abra outras opções com outros ícones, como no exemplo abaixo?