Biblioteki ikon.

Poznaj DXPR BuilderZarządzaj witrynąDopasuj do marki

Wybierak ikon w elementach Icon i Circle counter oferuje każdy zestaw ikon zarejestrowany w twojej witrynie. Kreator DXPR dostarcza 14 zestawów; moduły i motywy mogą dodać więcej plikiem YAML. Ta strona wymienia dostarczone zestawy, wyjaśnia ich ładowanie i pokazuje, jak dodać własny. Aby ograniczyć zestawy widziane przez rolę, użyj profilu kreatora; zobacz profile użytkowników.

Dostarczone zestawy ikon

Zestawy zarejestrowane są w dxpr_builder.dxpr_icon_sets.yml:

Klucz	Etykieta w wybieraku	Prefiks klas	Biblioteka
`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`

Wybierak nie oferuje zestawu fa, ponieważ nie ma listy ikon. Sprawia, że ikony zapisane starą klasą fa wczytują bibliotekę Font Awesome. Strony zapisane starymi nazwami bibliotek Font Awesome dostają też arkusz stylów dxpr_builder/elements.font_awesome_v4_shims, więc ich ikony nadal się pokazują.

Wszystkie zestawy Font Awesome wczytują Font Awesome Free 7. Biblioteka zachowuje maszynową nazwę wersji 6, ponieważ zapisane strony i własny kod się do niej odwołują. Font Awesome 7 w kreatorze DXPR wymienia zmiany.

Jak wybierak i strony wczytują ikony

Lista zestawu zaczyna się od All icon sets, potem wymienia każdy zarejestrowany zestaw z listą ikon. 13 dostarczonych zestawów poza fa ma wbudowane listy, więc witryna z samym kreatorem DXPR pokazuje 14 pozycji. Zestaw z innego modułu albo motywu potrzebuje listy icons w swoim YAML, aby się pojawić.

Gdy redaktor wybierze ikonę, element przechowuje klasy ikony, na przykład bi bi-star, i nazwę jej biblioteki. Odwiedzający pobierają wtedy tylko fonty ikon używane przez ich stronę. W edytorze ET Line, Pixeden i Glyphicon wczytują się wraz z samym edytorem; wybierak wczytuje arkusze stylów pozostałych zestawów przy otwarciu.

Jak redaktorzy wybierają i stylują ikonę, opisano na stronie dodawanie ikony.

Ograniczanie zestawów ikon dla roli

Każdy profil kreatora ma grupę Icon sets z polem na zestaw i polem Check/Uncheck all Icon sets. Skonfiguruj ją w DXPR Studio > DXPR Builder > User Profiles; kroki podają profile użytkowników. Tak działa grupa:

Przy zaznaczonym Check/Uncheck all Icon sets rola widzi każdy zestaw, w tym dodane później.
Przy odznaczonym rola widzi tylko zaznaczone zestawy. Nowy profil tak zaczyna, z zaznaczonym każdym zestawem, więc zestaw dodany później pozostaje ukryty, dopóki go nie zaznaczysz.
Przy odznaczonym i bez zaznaczonego zestawu wybierak jest pusty.
Ikony już znajdujące się na stronie nadal się pokazują. Profil zmienia tylko to, co oferuje wybierak.

Dodawanie zestawu ikon

Zestaw ikon to wpis YAML plus biblioteka Drupala. Kreator DXPR odczytuje *.dxpr_icon_sets.yml z każdego zainstalowanego modułu i motywu. Dokumentacja właściwości i hook alter znajdują się na stronie własne zestawy ikon.

Utwórz 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 jest względne do katalogu modułu i ładuje się w edytorze. Każda ikona to prefiks plus klasa zaczynająca się od prefiksu z myślnikiem.
Zadeklaruj bibliotekę w mymodule.libraries.yml. Strony odwiedzających ją wczytują:
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
Wyczyść pamięci podręczne poleceniem drush cr.
Zaznacz nowy zestaw w każdym profilu kreatora bez zaznaczonego Check/Uncheck all Icon sets.
Otwórz ustawienia elementu Icon i wybierz Brand icons w liście zestawu.

Własny moduł może też usunąć zestaw z wybieraka hookiem alter; kod znajduje się w dokumentacji hooków API. Ikony z dostarczonego zestawu i tak wczytują się na zapisanych stronach. Ikony z usuniętego własnego zestawu przestają wczytywać swój CSS, ponieważ kreator DXPR dołącza tylko bibliotekę nazwaną przez zarejestrowany zestaw.

Jeśli brakuje zestawu ikon

Nowego zestawu nie ma na liście. Jego YAML nie ma listy icons albo pamięć podręczna nadal trzyma stary rejestr. Dodaj listę i uruchom drush cr.
Zestawu brakuje tylko niektórym redaktorom. Ich profil kreatora go nie zaznacza. Zaznacz go w Icon sets w /admin/dxpr_studio/dxpr_builder/profile.
Ikony pokazują się w edytorze, ale nie u odwiedzających. Edytor wczytuje plik css zestawu, ale strony odwiedzających wczytują jego library. Upewnij się, że library nazywa bibliotekę w mymodule.libraries.yml zawierającą plik CSS.

Co dalej?

Własne zestawy ikon: dokumentacja właściwości YAML i hook alter.
Dodawanie ikony: ustawienia elementu Icon.