Estamos atualizando nossos ícones para Font Awesome 6!

[awesomerobot (Kris)]

O que é o Font Awesome?

O Discourse usa um conjunto gratuito de ícones do Font Awesome em toda a sua interface. Você os vê em barras de ferramentas, selos, botões, etc… aqui está a nossa barra de ferramentas do compositor:

Desde 2018, usamos o Font Awesome 5 (anúncio original), e nesse meio tempo o Font Awesome 6 foi lançado. A versão 6 inclui novos ícones, algumas atualizações gerais de estilo e renomeações.

A partir de hoje, o Discourse também começará a usar a versão 6! Especificamente, a versão 6.6.0. Esta não é uma mudança visual enorme, mas você notará algumas diferenças:

O que esta atualização envolve?

Esta atualização envolve um número de renomeações para tornar as coisas mais consistentes.

Para apoiar as comunidades do Discourse durante a atualização, as alterações serão implementadas em várias fases:

---

Hoje - Font Awesome atualizado para v6, os ícones serão remapeados automaticamente

Em breve - mensagens de depreciação serão habilitadas para ajudar os autores de temas/plugins a atualizar seus nomes de ícones

Q1 2025 - banner de aviso de administrador habilitado para quaisquer depreciações restantes

1º de abril de 2025 - remoção do remapeamento automático e do banner de aviso de administrador

2 de maio de 2025 - remoção do mapeamento de nomes de ícones antigos e logging em nível de erro

---

Estou vendo um ícone faltando, como posso corrigir isso?

1. Abra as ferramentas de desenvolvedor do navegador e encontre o elemento relevante com o ícone ausente.

2. Anote o nome atual do ícone afetado e procure o nome correto do ícone para o qual atualizá-lo. O mapeamento de nomes de ícones pode ser referenciado em discourse/lib/deprecated_icon_handler.rb at fbc2cfb6185c00950da8e915b1a32546e7020913 · discourse/discourse · GitHub.

3. Atualize o tema/plugin relevante ao qual o elemento pertence, ou notifique seu desenvolvedor para fazer a atualização.

Se precisar de ajuda com isso, sinta-se à vontade para criar um tópico de Support ou entrar em contato com seu provedor de hospedagem da maneira normal.

O que os autores de temas e plugins precisam saber?

Os métodos abordados em Introducing Font Awesome 5 and SVG icons ainda funcionarão para adicionar ícones novos e personalizados.

Desde então, removemos o remapeamento dos nomes antigos e, se seu tema/plugin ainda estiver usando nomes antigos, você verá espaços em branco onde alguns de seus ícones costumavam estar.

Há muitos ícones novos!

A atualização da versão 5 para a 6 introduz centenas de novos ícones gratuitos, quase 500 no total!

Você pode navegar pelo conjunto completo aqui, que está ordenado para mostrar as adições mais recentes primeiro — e a pesquisa é muito útil: Search Icons & Find the Perfect Design | Font Awesome

[Jagster (Jakke Lehtonen)]

Isso ainda é necessário:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

E isso deve ser editado:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>

[ondrej]

Isso é ótimo! Finalmente posso usar o Ícone que quero para uma categoria

[awesomerobot (Kris)]

@Jagster

Is this needed anymore:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

Parece que isso pode estar relacionado a Making tags look like real world tags - #11 by HeyRR… se você estiver usando CSS como content: \"\\f02b\"; então sim, você ainda precisará disso. Isso está usando a fonte de ícones separadamente de nossa implementação (que usa arquivos SVG diretamente)

@Jagster

And should this be edited:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>

Isso não precisa ser editado imediatamente, mas com base na lista de renomeações você deve substituir share-alt por share-nodes e beer por beer-mug-empty em algum momento nos próximos 6 meses (a caneca de cerveja preenchida é um ícone pro… acho que não é “grátis como cerveja”)

[Jagster (Jakke Lehtonen)]

@awesomerobot

pode estar relacionado a Fazendo tags parecerem tags do mundo real - #11 por HeyRR…

Talvez. Foi algo que foi recomendado mais de uma vez há alguns anos. Eu nunca entendi muito bem o porquê, mas posso copiar e colar Mas tem algo a ver com a capacidade de usar Font Awesome em algum lugar, em qualquer lugar ou algo assim.

Mas se eu não puder mais usar cerveja, iniciarei um motim com um exército de moomins

[Moin]

No momento, os ícones de escudo estão faltando aqui no Meta.

[Moin]

Corrigido

[patrickemin]

Obrigado, não está claro para mim se a atualização para a versão 6 foi feita ou será feita? (Não consegui encontrar o ícone "bluesky" versão 6 após atualizar meu site, é por isso que pergunto…)

[ondrej]

Após atualizar seu site, seus ícones serão FA6 e remapeados automaticamente pelo Discourse.

[patrickemin]

Sim, era o que eu esperava, mas este ícone não pode ser exibido (eu o uso no componente de links de ícones do cabeçalho)

[ondrej]

Encontrei o ícone na versão 6.6.0

Font Awesome

Como não é um ícone usado no Discourse, ele está no seu svg icon subset nas configurações do site?

[patrickemin]

Não, estou adicionando com esta sintaxe: “fa-bluesky” nos recursos do componente, mas não é suficiente. Vou verificar essa coisa de recursos SVG, não estou familiarizado com isso.

(atualização), aparentemente estamos falando da mesma coisa, sim, está adicionado nos recursos…

[awesomerobot (Kris)]

você pode precisar fazer fab-bluesky, pois faz parte do conjunto de marcas

[patrickemin]

Obrigado, funciona especificando fab-bluesky nos recursos SVG e no editor de links do cabeçalho personalizado, o que eu nunca precisei fazer antes. No componente de links do cabeçalho personalizado, eu nunca especifiquei o prefixo “fa”, para o ícone bluesky precisei especificar “fab-bluesky”. O principal é que funciona! Obrigado.

[Jagster (Jakke Lehtonen)]

@Jagster

Mas se eu não puder mais usar cerveja, iniciarei um motim com um exército de Moomins

Eu fiz o upgrade e os ícones mudaram. A coisa que mais me incomodava, porque tenho um pouco de medo dos meus usuários (essas senhoras são maravilhosas, mas se elas ficarem chateadas…) é o que acontece com as reações, mas isso é um mundo diferente, certo? De qualquer forma, tudo correu bem.

[darkpixlz (Pyx)]

Parece uma ótima atualização! Adorei o arredondamento atualizado. Não sabia que era uma mudança que eu queria.

[mattdm (Matthew Miller)]

O mais importante é que a nova versão usa o logotipo correto do Fedora em vez de uma aproximação não autorizada que estava dando aneurismas aos nossos designers.

[bloomexperiment (Tracey)]

Os componentes de tema oficiais de Ícones de Categoria e Ícones de Marcação serão atualizados para usar os novos nomes do Font Awesome 6?

Category Icons

This theme component is deprecated and should no longer be used. Its features are now in Discourse Core (see: Bringing popular features to Discourse). For private category icon customization, refer to this topic. Summary Category Icons allows category badge links to have icons next to the category name. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-category-icons …

Tag Icons

Summary Tag Icons allows tags to have an icon next to the tag label. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-tag-icons New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Here is an example of how this would look, with tag style set to the default (simple): [image] Here is how this looks with tag sty…

Acho que eles ainda usam FA5 atualmente.

[awesomerobot (Kris)]

Esses componentes de tema usam o sistema de ícones integrado ao Discourse, portanto, não acredito que precisarão de uma atualização para serem compatíveis — eles devem usar automaticamente os novos ícones.