Discourse FontAwesome Pro

:discourse2: Resumo Discourse FontAwesome Pro permite o uso de ícones Font Awesome Pro no Discourse com uma licença FontAwesome 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 alguns passos extras para ativar em comparação com um plugin normal:

Primeiro, você precisará configurar uma variável de ambiente adicional contendo seu token do pacote font awesome pro (observe que isso é diferente do seu token de API): DISCOURSE_FONTAWESOME_AUTH_TOKEN

O script de instalação também precisa ser chamado durante a inicialização, como um hook adicional de “after_code”. Isso baixa e adiciona os SVGs do FontAwesome 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 no 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 administrador, 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 pelo seu próprio esquema 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 Estilização Duotone
Se você estiver usando seletores baseados em classes como:

.fa-secondary { color: red; }

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


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

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

36 curtidas