Font Awesome 7 no DXPR Builder.

Aprender DXPR BuilderComece aquiInstalar e atualizar

O DXPR Builder atualiza os seus ícones Font Awesome Free incluídos da versão 6.7.2 para 7.3.1. As páginas continuam a funcionar sem edições: cada ícone numa página guardada continua a aparecer, no mesmo tamanho e posição. Os ícones em si são redesenhados, por isso parecem ligeiramente diferentes. Esta página mostra a mudança e lista os poucos casos que precisam de verificação depois de atualizar.

O que muda nas suas páginas

  • Novos desenhos de ícones. O Font Awesome 7 redesenha os ícones com formas mais pesadas e redondas. Os ícones Regular (contorno) ganham linhas mais grossas. Os logótipos de marcas quase não mudam.
  • Mesmo esquema. O Font Awesome 7 dá a cada ícone largura fixa por predefinição, o que moveria ícones estreitos para a direita. O DXPR Builder mantém o comportamento Font Awesome 6 nas suas páginas e no editor, por isso os ícones mantêm posição e espaçamento. Alguns ícones redesenhados são ligeiramente mais estreitos, como house e truck. Ícones com a classe fa-fw, como ligações sociais, mantêm largura fixa como antes.
  • Mesmos nomes de classes. As páginas guardadas mantêm as classes de ícones, como fas fa-house. Classes do Font Awesome 4 e 5 continuam a funcionar através dos estilos de compatibilidade, que ainda cobrem os mesmos 464 nomes antigos.

Antes e depois

Cada mosaico mostra um ícone duas vezes. O ícone cinzento à esquerda é Font Awesome 6.7.2; o ícone preto à direita é Font Awesome 7.3.1.

Grelha de 64 ícones sólidos comuns de interface a comparar Font Awesome 6 à esquerda com Font Awesome 7 à direita

Grelha de ícones de estilo regular e logótipos de marcas populares a comparar Font Awesome 6 com Font Awesome 7

Grelha dos ícones usados nos modelos e conteúdo de demonstração do DXPR Builder em Font Awesome 6 e Font Awesome 7

Ícones novos

O seletor de ícones lista agora 1992 ícones gratuitos, contra 1895.

Estilo Font Awesome 6.7.2 Font Awesome 7.3.1
Solid 1402 1422
Regular 163 169
Brands 495 572

Os 103 ícones novos incluem logótipos de marcas como Claude, Copilot, Gemini, Fediverse, Codeberg e Forgejo, e os signos do zodíaco.

Ícones renomeados e removidos

Cinco ícones têm nomes novos. As páginas que usam os nomes antigos continuam a mostrar o ícone, porque o Font Awesome 7 ainda os aceita. O seletor de ícones oferece só os nomes novos.

Nome antigo Nome novo
user-large user
user-large-slash user-slash
headphones-simple headphones
handshake-simple handshake
handshake-simple-slash handshake-slash

Um ícone sai do conjunto gratuito: vector-square. O Font Awesome 7 só o oferece na edição paga Pro, por isso uma página que usa fa-vector-square não mostra ícone depois da atualização. Substitua-o por um ícone gratuito como draw-polygon ou object-group.

O que fica igual

  • Licença. O Font Awesome Free mantém os mesmos termos. Os ícones usam CC BY 4.0, os tipos de letra SIL OFL 1.1 e o código MIT.
  • Nomes de bibliotecas. A biblioteca Drupal mantém o nome de máquina, dxpr_builder/elements.font_awesome_6_free, porque páginas guardadas e código personalizado a referem. Agora carrega Font Awesome 7.
  • Suporte de navegadores. O Font Awesome 7 só distribui tipos de letra WOFF2. Cada navegador suportado pelo DXPR Builder lê WOFF2.

Verifique o seu site depois de atualizar

  1. Pesquise o seu conteúdo por fa-vector-square e substitua-o como descrito acima.
  2. Verifique CSS de tema personalizado que desenha ícones Font Awesome. O Font Awesome 7 muda os nomes dos tipos de letra para "Font Awesome 7 Free" e "Font Awesome 7 Brands". CSS que define font-family como "Font Awesome 6 Free" ou "Font Awesome 6 Brands" junto com um ponto de código content deixa de mostrar o ícone. Use os nomes novos, ou as propriedades personalizadas --fa-family-classic e --fa-family-brands que o Font Awesome 7 fornece.
  3. Verifique marcação de tema que depende de sr-only. O Font Awesome 6 definia uma classe sr-only e o Font Awesome 7 não. Texto que um tema ocultava com ela fica visível. Temas Bootstrap 5 podem usar visually-hidden.
  4. Verifique ícones do tema fora do conteúdo DXPR Builder. Ícones que o seu tema apresenta fora de uma página DXPR Builder, como num menu ou rodapé, seguem a largura fixa do Font Awesome 7. Para manter as larguras antigas aí também, defina --fa-width: auto no contentor.
  5. Limpe caches. Corra drush cr e purgue qualquer CDN ou cache de proxy reverso para que os visitantes recebam as novas folhas de estilo e tipos de letra.

E a seguir?