Bibliotecas de iconos.
El selector de iconos en los elementos Icon y Circle counter ofrece cada conjunto de iconos registrado en tu sitio. DXPR Builder trae 14 conjuntos; módulos y temas pueden añadir más con un archivo YAML. Esta página enumera los incluidos, explica cómo se cargan y muestra cómo añadir uno. Para limitar los conjuntos que ve un rol, usa un perfil del constructor; consulta User profiles.
Conjuntos de iconos incluidos
Los conjuntos se registran en dxpr_builder.dxpr_icon_sets.yml:
| Clave | Etiqueta en el selector | Prefijo de clase | Biblioteca |
|---|---|---|---|
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 |
El selector no ofrece el conjunto fa, porque no tiene lista de iconos. Hace que los iconos guardados con la vieja clase fa carguen la biblioteca Font Awesome. Las páginas guardadas con los viejos nombres de biblioteca Font Awesome también reciben la hoja de estilos dxpr_builder/elements.font_awesome_v4_shims, así que sus iconos siguen mostrándose.
Todos los conjuntos Font Awesome cargan Font Awesome Free 7. La biblioteca conserva su nombre de máquina de la versión 6, porque páginas guardadas y código personalizado la referencian. Font Awesome 7 en DXPR Builder enumera lo que cambió.
Cómo el selector y las páginas cargan iconos
El desplegable de conjuntos empieza con All icon sets, y luego enumera cada conjunto registrado que tiene lista de iconos. Los 13 conjuntos incluidos salvo fa tienen listas integradas, así que un sitio solo con DXPR Builder muestra 14 entradas. Un conjunto de otro módulo o tema necesita una lista icons en su YAML para aparecer.
Cuando una persona que edita escoge un icono, el elemento guarda las clases del icono, como bi bi-star, y el nombre de su biblioteca. Las visitas descargan entonces solo las fuentes de iconos que su página usa. En el editor, ET Line, Pixeden y Glyphicon se cargan con el propio editor; el selector carga las hojas de estilo de los demás conjuntos cuando se abre.
Cómo escogen y dan estilo a un icono las personas que editan está en Añadir un icono.
Limita conjuntos de iconos por rol
Cada perfil del constructor tiene un grupo Icon sets con una casilla por conjunto y una casilla Check/Uncheck all Icon sets. Configúralo en DXPR Studio > DXPR Builder > User Profiles; User profiles tiene los pasos. Cómo se comporta el grupo:
- Con Check/Uncheck all Icon sets marcado, el rol ve cada conjunto, incluidos los añadidos después.
- Sin marcar, el rol ve solo los conjuntos marcados. Un perfil nuevo empieza así, con cada conjunto marcado, así que un conjunto añadido después queda oculto hasta que lo marcas.
- Sin marcar y sin ningún conjunto marcado, el selector está vacío.
- Los iconos ya puestos en una página siguen mostrándose. El perfil solo cambia lo que ofrece el selector.
Añade un conjunto de iconos
Un conjunto de iconos es una entrada YAML más una biblioteca Drupal. DXPR Builder lee *.dxpr_icon_sets.yml de cada módulo y tema instalado. La referencia de propiedades y el hook de alteración están en Conjuntos de iconos personalizados.
-
Crea
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'csses relativo a la carpeta del módulo y se carga en el editor. Cada icono es el prefijo más una clase que empieza con el prefijo y un guion. -
Declara la biblioteca en
mymodule.libraries.yml. Las páginas de visitas la cargan:brand_icons: css: theme: css/brand-icons.css: {} -
Limpia cachés con
drush cr. -
Marca el conjunto nuevo en cada perfil del constructor que no tiene Check/Uncheck all Icon sets marcado.
-
Abre los ajustes de un elemento Icon y elige Brand icons en el desplegable de conjuntos.
Un módulo personalizado también puede quitar un conjunto del selector con un hook de alteración; el código está en Referencia de la API de hooks. Los iconos de un conjunto incluido siguen cargándose en páginas guardadas. Los iconos de un conjunto personalizado quitado dejan de cargar su CSS, porque DXPR Builder solo adjunta una biblioteca que nombra un conjunto registrado.
Si falta un conjunto de iconos
- Un conjunto nuevo no está en el desplegable. Su YAML no tiene lista
icons, o la caché aún guarda el registro viejo. Añade la lista y ejecutadrush cr. - Falta un conjunto solo para algunas personas que editan. Su perfil del constructor no lo marca. Márcalo en Icon sets desde
/admin/dxpr_studio/dxpr_builder/profile. - Los iconos se ven en el editor, pero no para las visitas. El editor carga el archivo
cssdel conjunto, pero las páginas de visitas cargan sulibrary. Asegúrate de quelibrarynombra una biblioteca enmymodule.libraries.ymlque contiene el archivo CSS.
¿Qué sigue?
- Conjuntos de iconos personalizados: la referencia de propiedades YAML y el hook de alteración.
- Añadir un icono: los ajustes del elemento Icon.