O TikTok precisa de @ e o YouTube usa o URL do fórum ![]()
Eu não uso o TikTok - você tem um nome de usuário de exemplo que posso usar para experimentar?
Bem, o meu é jagster64 - é bem seguro de usar porque eu não publico.
Corrigido - adicionado à pull request
Pull request enviado para adicionar suporte ao Strava - espero que @weallwegot tolere meu pull request um pouco bagunçado :-s
Hm, temporary-twitter-x foi alterado de volta para fab-twitter. Isso foi feito de propósito ou por engano? De qualquer forma, o antigo pássaro do Twitter está lá novamente em vez do novo logotipo X.
Obrigado pela observação - criei um pull request para atualizá-lo para a reformulação da marca do Twitter.
Obrigado! Mas, infelizmente, você precisa alterar fa-x-twitter para temporary-twitter-x, pois fa-x-twitter é Fontawesome 6, que ainda não funciona no Discourse.
Eu acho que deveria
Atualizado com o ícone X correto… sabendo que todo especialista em Branding e Marketing sentiu um arrepio, mas não consegue explicar por quê
Realizei alguns testes - posso confirmar que o ícone FA6 funciona - solicitação de pull atualizada
Sim, interessante, Fontawesome 6 parece funcionar agora com o Discourse! ![]()
Com o ícone correto, também consigo vê-lo. Legal! Muito obrigado!
Olá, é possível adicionar um SVG personalizado em vez de um do FontAwesome, como é permitido em Custom Header Links (icons)?
Como isso?
Acabei de perceber que desmarcar “Mostrar no perfil público” remove o campo de usuário do perfil público (como esperado), mas o comportamento do ícone fornecido por este componente de tema é mais errático:
- na minha conta de administrador, ainda consigo ver o ícone
- na minha conta de teste (nível de confiança 1), o ícone também desaparece
Em outras palavras, para a maioria dos usuários logados e todos os usuários anônimos, o ícone do campo de usuário personalizado só é visível quando o rótulo e o valor de texto correspondentes também estão visíveis. Ocultar um, oculta o outro.
É estranho, mas tentei com navegadores diferentes, janela anônima e consigo reproduzir isso de forma confiável. Mais alguém consegue reproduzir este problema?
É uma daquelas coisas que são fáceis de perder como administrador. Só percebi depois que um usuário relatou um problema que me fez perceber esse comportamento.
Caso ajude, estou testando com o ícone do Mastodon.
Estou com um problema em que os links não estão navegando corretamente para o perfil de mídia social do usuário. Parece que ele apenas anexa a URL da página em que você está com o campo personalizado do usuário.
Até agora, notei isso para Steam e Discord.
Analisando o repositório do github em links-settings.js, não há linhas base: ou baseregex: para Steam e Discord… Bluesky e Twitter (desculpe, X, o aplicativo de tudo) funcionam bem, e eles têm ambas as linhas, então talvez esse seja o problema?
{
name: "Discord",
icon: "fab-discord",
link: {
value: settings.discord_custom_field_name,
},
},
{
name: "Steam",
icon: "fab-steam",
link: {
value: settings.steam_custom_field_name,
},
},
Para Bluesky:
{
name: "Bluesky",
icon: "fab-bluesky",
link: {
value: settings.bluesky_custom_field_name,
base: "https://bsky.app/profile/",
baseregex: "^http(s)?://(www.)?bsky.app/profile/",
},
},
Para Twitter:
{
name: "X",
icon: "fab-twitter",
link: {
value: settings.twitter_custom_field_name,
base: "https://twitter.com/",
baseregex: "^http(s)?://(www.)?twitter.com/",
},
},
Analisando o restante das entradas, parece que estas também não têm as linhas base: ou baseregex:, mas não tenho um exemplo ativo delas para testar.
- mastodon
- discord
- steam
- bandcamp
(editado para adicionar) Eu criei um pull request:
09096b8: adicionando as URLs base para email, steam e linkedin
0ec40a0: adicionado discord, bandcamp e mastodon, e atualizado o readme. Fiz isso separadamente porque bandcamp e mastodon terão URLs base diferentes dependendo do usuário, elas não são consistentes; e para o Discord, o usuário inseriria seu ID de Usuário e não seu nome de usuário, então parecia que precisaria de explicação no readme.
Criei campos de usuário personalizados que correspondiam aos que eu queria usar. Apenas alguns dos ícones apareceram, mas depois também mostraram o nome social e a URL na parte inferior do cartão de perfil. Como evito isso e garanto que todos os ícones apareçam? Devo atualizar o ícone do Facebook para: fab-facebook-f e renomear o Twitter para X e usar este ícone: fab-x-twitter e… e adicionar o Snapchat com este ícone: fab-snapchat
Super útil, obrigado.
Ok, para aqueles que desejam atualizar o Twitter para X (tanto o ícone quanto o URL), siga estas etapas.
-
Vá para Admin > Aparência > Temas e componentes > Componentes > Instalar > Criar novo
-
Adicione este código na aba CSS (substitua “XXXXX” pelo seu nome de usuário @):
/* 1. Ocultar o ícone SVG original do Twitter */
a[href="https://twitter.com/XXXXX"] svg.d-icon-fab-twitter,
a[href="https://x.com/XXXXX"] svg.d-icon-fab-twitter {
display: none;
}
/* 2. Injetar o ícone X usando um pseudo-elemento e uma máscara CSS */
a[href="https://twitter.com/XXXXX"]::before,
a[href="https://x.com/XXXXX"]::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>') no-repeat center;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
- Adicione este código na aba
<head>(substitua “XXXXX” pelo seu nome de usuário @):
<script>
// Cria uma função que encontra e altera o link
function updateTwitterLinks() {
const oldLinks = document.querySelectorAll('a[href="https://twitter.com/XXXXX"]');
oldLinks.forEach(link => {
link.href = 'https://x.com/XXXXX';
});
}
// 1. Tenta executar imediatamente, caso seja necessário
updateTwitterLinks();
// 2. Configura um "observador" para conteúdo carregado dinamicamente (como posts do Discourse)
const observer = new MutationObserver(function(mutations) {
updateTwitterLinks();
});
// Começa a observar todo o corpo da página em busca de elementos recém-adicionados
observer.observe(document.body, { childList: true, subtree: true });
</script>
Pronto.

