Bibliotecas de ícones.
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.
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 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.
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 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.
-
Crie
mymodule/mymodule.dxpr_icon_sets.yml: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. -
Declare a biblioteca em
mymodule.libraries.yml. As páginas dos visitantes carregam-na:brand_icons: css: theme: css/brand-icons.css: {} -
Limpe as caches com
drush cr. -
Marque o novo conjunto em cada perfil do construtor que não tem Check/Uncheck all Icon sets marcado.
-
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. 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 executedrush 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
cssdo conjunto, mas as páginas dos visitantes carregam alibrary. Garanta quelibraryindica uma biblioteca emmymodule.libraries.ymlcom o ficheiro CSS.
O que se segue?
- Conjuntos de ícones personalizados: a referência de propriedades YAML e o hook de alteração.
- Adicionar um ícone: as definições do elemento Icon.