Discourse FontAwesome Pro

:discourse2: Resumo Discourse FontAwesome Pro permite o uso de ícones do Font Awesome Pro no Discourse com uma licença do Font Awesome, utilizando o token do pacote NPM da sua conta.
:hammer_and_wrench: Link do Repositório https://github.com/discourse/discourse-fontawesome-pro
:open_book: Guia de Instalação Como instalar plugins no Discourse

Configuração

Isso requer algumas etapas extras para habilitar, além de um plugin normal:

Primeiro, você precisará configurar uma variável de ambiente adicional contendo sua chave de licença do Font Awesome Pro: DISCOURSE_FONTAWESOME_AUTH_TOKEN

O script de instalação também precisa ser chamado durante a inicialização, como um gancho “after_code” adicional. Isso baixa e adiciona os SVGs do Font Awesome Pro na compilação usando seu token de autenticação. Este é um bloco adicional separado do bloco de clonagem do plugin.

Aqui está um exemplo de instalação em app.yml:

env:
  DISCOURSE_FONTAWESOME_AUTH_TOKEN: 123456
  
hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/discourse-fontawesome-pro.git
    - exec:
        cd: $home/plugins/discourse-fontawesome-pro
        raise_on_fail: false
        cmd:
          - $home/plugins/discourse-fontawesome-pro/scripts/install.sh

Escolhendo uma família de substituição:

Nas configurações de administração, você pode substituir a família de ícones padrão do Discourse:

Escolhendo um estilo de substituição:

Você também pode substituir o estilo de ícone padrão:

Duotone

Para ter controle total sobre o suporte a duotone, você precisará substituir o seguinte CSS (em um tema ou de outra forma) e substituí-lo pela sua própria paleta de cores:

svg {
  --fa-secondary-color: red;
  --fa-secondary-opacity: 0.6;
}

Para colorir ícones individuais, referencie o ID do SVG:

#fad-search .fa-secondary {
  --fa-secondary-color: red;
  --fa-secondary-opacity: 0.6;
}

:warning: Atualização de Estilo Duotone
Se você estiver usando seletores baseados em classe como:

.fa-secondary { color: red; }

Você precisará atualizar seu estilo para usar propriedades personalizadas de CSS em vez disso. Substituições de cor baseadas em classe não funcionam mais, pois foram removidas no Font Awesome v7


Por baixo dos panos, isso usa o repositório do Font Awesome para instalar fontes na pasta SVG do plugin e permite que o Discourse capture os sprites de lá.

:discourse2: Hospedado por nós? Este plugin está disponível em nossos planos Enterprise.

36 curtidas

@featheredtoast Ainda não tive a chance de verificar, mas isso baixa a versão mais recente do Font Awesome Pro, como a 6.x?

Houve uma solução alternativa mencionada aqui:

A versão mais recente já suporta o FA6 pro? @featheredtoast

Receio que ainda não. Acho que este ainda é o caso:

3 curtidas

Para quem estiver se perguntando, isso ainda não funciona com a v6, mesmo com o core mais recente dando suporte, você ainda precisa usar --branch fa5 para que os ícones pro funcionem.

3 curtidas

Este plugin ainda está em manutenção? Estou curioso se poderíamos usar os ícones do FA(6) pro neste momento.

Precisa de alguns retoques - está na lista, estamos trabalhando nisso - Desculpe a poeira.

2 curtidas

Olá a todos, atualizei este plugin para funcionar com o FontAwesome v7. Atualizarei a documentação em breve.

6 curtidas

É possível que o estilo regular não esteja sendo aplicado corretamente nas configurações do plugin? Ao verificar Find Icons with the Perfect Look & Feel | Font Awesome, os ícones FA no estilo regular estão todos vazados, mas no meu site os ícones ainda têm um estilo preenchido

2 curtidas

Obrigado por relatar, a correção já foi mesclada. Informe se encontrar outros problemas.

2 curtidas

Olá Juan,
Isso tem alguma relação por acaso?

1 curtida

Mais alguém está tendo um problema com o ícone “d-icon-d-watching-first” que não funciona quando o plugin está ativado?
Testado em 3.6.0.beta2

1 curtida

Ah, boa observação. Acabei de atualizar o plugin para que ele mostre o ícone correto novamente.

2 curtidas

outro bug (re)surgiu com as seguintes configurações:
Estilo de ícone Fa definido como regular
Família de ícones Fa definida como clássica

Quando um favorito com lembrete é definido, nenhum ícone é exibido:

CleanShot 2025-11-24 at 15.58.04@2x

2 curtidas

Obrigado! Acabei de enviar uma correção para isso. Deve funcionar agora.

2 curtidas

@Alteras

O que você acha de um recurso adicional de plugin que permita usar um estilo diferente para todos os ícones de estado ativo? Por exemplo, vejo a tendência de ícones preenchidos (em FA: estilo de ícone “sólido”) sendo usados para o estado ativo e ícones vazados (em FA: estilo de ícone “regular”) para o estado normal.

Ao usar o Discourse, notei que parece “estranho” ter ícones vazados (também conhecidos como estilo regular do FA) no estado ativo.

2 curtidas

A API parece não funcionar com o plano Lite de $60, presumo que você precise do plano Pro de $99 por ano para usar a API para ícones profissionais…

não, a API precisa da opção de download e do uso em aplicativos SVG, o que requer o plano Pro (ou superior). O plano Pro Lite permite apenas uso limitado na web por meio do kit deles. Eles não deixam isso super claro e isso provavelmente deveria ser adicionado à postagem original.