--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/icon-libraries' title: 'Bibliotecas de ícones | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:46:46+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'O seletor de ícones nos elementos Icon e Circle counter oferece cada conjunto de ícones que o site regista. O DXPR Builder traz 14 conjuntos; módulos e temas podem adicionar mais com um ficheiro YAML. Esta página enumera os conjuntos incluídos, explica como carregam, e mostra como adicionar um. Para limitar os conjuntos que uma função vê, use um perfil do construtor; consulte Perfis de utilizador.' tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:46:46+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Bibliotecas de ícones' description: 'O seletor de ícones nos elementos Icon e Circle counter oferece cada conjunto de ícones que o site regista. O DXPR Builder traz 14 conjuntos; módulos e temas podem adicionar mais com um ficheiro YAML. Esta página enumera os conjuntos incluídos, explica como carregam, e mostra como adicionar um. Para limitar os conjuntos que uma função vê, use um perfil do construtor; consulte Perfis de utilizador.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:46:46+0000' dateModified: '2026-10-24T11:46:46+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/icon-libraries' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/icon-libraries' description: 'O seletor de ícones nos elementos Icon e Circle counter oferece cada conjunto de ícones que o site regista. O DXPR Builder traz 14 conjuntos; módulos e temas podem adicionar mais com um ficheiro YAML. Esta página enumera os conjuntos incluídos, explica como carregam, e mostra como adicionar um. Para limitar os conjuntos que uma função vê, use um perfil do construtor; consulte Perfis de utilizador.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Bibliotecas de ícones. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Conjuntos de ícones personalizados](/pt-pt/hc/documentation/learn-dxpr-builder/development/icon-sets) - [Icon](/hc/documentation/learn-dxpr-builder/elements/icon) O seletor de ícones nos elementos **Icon** e **Circle counter** oferece cada conjunto de ícones que o site regista. O DXPR Builder traz 14 conjuntos; módulos e temas podem adicionar mais com um ficheiro YAML. Esta página enumera os conjuntos incluídos, explica como carregam, e mostra como adicionar um. Para limitar os conjuntos que uma função vê, use um perfil do construtor; consulte [Perfis de utilizador](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). ## Conjuntos de ícones incluídos Os conjuntos registam-se em `dxpr_builder.dxpr_icon_sets.yml`: | Key | Label in the picker | Class prefix | Library | |---|---|---|---| | `bi` | Bootstrap Icons | `bi` | `dxpr_builder/elements.bootstrap_icons` | | `et` | ET Line Icons | `et` | `dxpr_builder/elements.et_line_font` | | `fab` | Font Awesome Free Brands | `fab` | `dxpr_builder/elements.font_awesome_6_free` | | `far` | Font Awesome Free Regular | `far` | `dxpr_builder/elements.font_awesome_6_free` | | `fas` | Font Awesome Free Solid | `fas` | `dxpr_builder/elements.font_awesome_6_free` | | `glyphicon` | Glyphicon Halflings | `glyphicon` | `dxpr_builder/elements.glyphicons_halflings` | | `pe` | Pixeden Line Icons | `pe` | `dxpr_builder/elements.pe_icon_7_stroke` | | `ph` | Phosphor Icons Regular | `ph` | `dxpr_builder/elements.phosphor_icons` | | `ph_bold` | Phosphor Icons Bold | `ph-bold` | `dxpr_builder/elements.phosphor_icons_bold` | | `ph_duotone` | Phosphor Icons Duotone | `ph-duotone` | `dxpr_builder/elements.phosphor_icons_duotone` | | `ph_fill` | Phosphor Icons Fill | `ph-fill` | `dxpr_builder/elements.phosphor_icons_fill` | | `ph_light` | Phosphor Icons Light | `ph-light` | `dxpr_builder/elements.phosphor_icons_light` | | `ph_thin` | Phosphor Icons Thin | `ph-thin` | `dxpr_builder/elements.phosphor_icons_thin` | | `fa` | Font Awesome (v4 compatibility) | `fa` | `dxpr_builder/elements.font_awesome_6_free` | O seletor não oferece o conjunto `fa`, porque não tem lista de ícones. Faz os ícones guardados com a classe antiga `fa` carregarem a biblioteca Font Awesome. As páginas guardadas com os nomes antigos de biblioteca Font Awesome também recebem a folha de estilos `dxpr_builder/elements.font_awesome_v4_shims`, para os ícones continuarem a aparecer. Todos os conjuntos Font Awesome carregam Font Awesome Free 7. A biblioteca mantém o nome de sistema da versão 6, porque páginas guardadas e código próprio o referem. [Font Awesome 7 no DXPR Builder](/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7) enumera o que mudou. ## Como o seletor e as páginas carregam ícones A lista de conjuntos começa com **All icon sets** e depois enumera cada conjunto do registo com lista de ícones. Os 13 conjuntos incluídos além de `fa` têm listas incluídas, por isso um site só com DXPR Builder mostra 14 entradas. Um conjunto de outro módulo ou tema precisa de uma lista `icons` no YAML para aparecer. Quando um editor escolhe um ícone, o elemento guarda as classes do ícone, como `bi bi-star`, e o nome da biblioteca. Os visitantes descarregam depois apenas os tipos de letra de ícones que a página usa. No editor, ET Line, Pixeden e Glyphicon carregam com o próprio editor; o seletor carrega as folhas de estilo dos outros conjuntos ao abrir. Como os editores escolhem e estilizam um ícone está em [Adicionar um ícone](/hc/documentation/learn-dxpr-builder/elements/icon). ## Limitar conjuntos de ícones por função Cada perfil do construtor tem um grupo **Icon sets** com uma caixa por conjunto e uma caixa **Check/Uncheck all Icon sets**. Configure-o em **DXPR Studio** > **DXPR Builder** > **User Profiles**; [Perfis de utilizador](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) tem os passos. Como o grupo se comporta: - Com **Check/Uncheck all Icon sets** marcado, a função vê cada conjunto, incluindo conjuntos adicionados mais tarde. - Com ele desmarcado, a função vê apenas os conjuntos marcados. Um perfil novo começa assim, com cada conjunto marcado, por isso um conjunto adicionado mais tarde fica escondido até o marcar. - Com ele desmarcado e nenhum conjunto marcado, o seletor fica vazio. - Os ícones já numa página continuam a aparecer. O perfil só muda o que o seletor oferece. ## Adicionar um conjunto de ícones Um conjunto de ícones é uma entrada YAML mais uma biblioteca do Drupal. O DXPR Builder lê `*.dxpr_icon_sets.yml` de cada módulo e tema instalado. A referência de propriedades e o hook de alteração estão em [Conjuntos de ícones personalizados](/hc/documentation/learn-dxpr-builder/development/icon-sets). 1. Crie `mymodule/mymodule.dxpr_icon_sets.yml`: ```yaml brand: label: 'Brand icons' prefix: brand css: css/brand-icons.css library: mymodule/brand_icons icons: - 'brand brand-logo' - 'brand brand-arrow' ``` `css` é relativo à pasta do módulo e carrega no editor. Cada ícone é o prefixo mais uma classe que começa com o prefixo e um hífen. 2. Declare a biblioteca em `mymodule.libraries.yml`. As páginas dos visitantes carregam-na: ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. Limpe as caches com `drush cr`. 4. Marque o novo conjunto em cada perfil do construtor que não tem **Check/Uncheck all Icon sets** marcado. 5. Abra as definições de um elemento **Icon** e escolha **Brand icons** na lista de conjuntos. Um módulo próprio também pode remover um conjunto do seletor com um hook de alteração; o código está em [Referência da API de hooks](/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_icon_sets_alter). Os ícones de um conjunto incluído continuam a carregar em páginas guardadas. Os ícones de um conjunto personalizado removido deixam de carregar o CSS, porque o DXPR Builder só anexa uma biblioteca que um conjunto do registo indica. ## Se um conjunto de ícones falta - **A new set is not in the dropdown.** O YAML não tem lista `icons`, ou a cache ainda guarda o registo antigo. Adicione a lista e execute `drush cr`. - **A set is missing for some editors only.** O perfil do construtor não o marca. Marque-o em **Icon sets** em `/admin/dxpr_studio/dxpr_builder/profile`. - **Icons show in the editor but not for visitors.** O editor carrega o ficheiro `css` do conjunto, mas as páginas dos visitantes carregam a `library`. Garanta que `library` indica uma biblioteca em `mymodule.libraries.yml` com o ficheiro CSS. ## O que se segue? - [Conjuntos de ícones personalizados](/hc/documentation/learn-dxpr-builder/development/icon-sets): a referência de propriedades YAML e o hook de alteração. - [Adicionar um ícone](/hc/documentation/learn-dxpr-builder/elements/icon): as definições do elemento Icon.