아이콘 라이브러리.

Learn DXPR BuilderManage the siteRegelen wie wat kan doen

다음 요소의 아이콘 선택기는 사이트에 등록된 모든 아이콘 세트를 제공합니다. Icon과 Circle counter 요소의 아이콘 선택기는 사이트에 등록된 모든 아이콘 세트를 제공합니다. DXPR Builder에는 14개 세트가 포함되어 있습니다. 모듈과 테마는 YAML 파일로 추가할 수 있습니다. 이 페이지에서는 포함된 세트를 나열하고 로드 방식을 설명하며 추가법을 보여줍니다. 역할이 보는 세트를 제한하려면 빌더 프로필을 사용합니다. User profiles를 참조합니다.

포함된 아이콘 세트

세트는 dxpr_builder.dxpr_icon_sets.yml에 등록되어 있습니다.

키	선택기 라벨	클래스 접두사	라이브러리
`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`

선택기는 fa 세트를 제공하지 않습니다. 아이콘 목록이 없기 때문입니다. 이전 fa 클래스로 저장된 아이콘은 Font Awesome 라이브러리를 로드하게 합니다. 이전 Font Awesome 라이브러리 이름으로 저장된 페이지에는 dxpr_builder/elements.font_awesome_v4_shims 스타일시트도 제공되므로 아이콘이 계속 표시됩니다.

모든 Font Awesome 세트는 Font Awesome Free 7을 로드합니다. 저장된 페이지와 사용자 정의 코드가 참조하므로 라이브러리는 버전 6 머신 이름을 유지합니다. 변경 내용은 Font Awesome 7 in DXPR Builder에 나와 있습니다.

선택기와 페이지의 아이콘 로드 방식

세트 드롭다운은 All icon sets로 시작하며, 아이콘 목록이 있는 등록된 모든 세트를 나열합니다. fa 외 13개 포함 세트에는 목록이 내장되어 있어 DXPR Builder만 있는 사이트에는 14개 항목이 표시됩니다. 다른 모듈이나 테마의 세트가 표시되려면 YAML에 icons 목록이 있어야 합니다.

에디터가 아이콘을 고르면 요소는 bi bi-star 같은 아이콘 클래스와 라이브러리 이름을 저장합니다. 방문자는 페이지가 쓰는 아이콘 폰트만 다운로드합니다. 에디터에서는 ET Line, Pixeden, Glyphicon이 에디터 자체와 함께 로드되며, 선택기는 열릴 때 다른 세트의 스타일시트를 로드합니다.

에디터의 아이콘 선택 및 스타일 지정법은 Adding an Icon에 있습니다.

역할별 아이콘 세트 제한하기

각 빌더 프로필에는 Icon sets 그룹이 있으며, 세트마다 상자 하나와 Check/Uncheck all Icon sets 상자가 있습니다. DXPR Studio > DXPR Builder > User Profiles에서 구성합니다. 단계는 User profiles에 있습니다. 그룹 동작은 다음과 같습니다.

다음을 체크하면 역할에 모든 세트가 표시되며, 나중에 추가된 세트도 포함됩니다. Check/Uncheck all Icon sets를 체크하면 역할에 모든 세트가 표시되며, 나중에 추가된 세트도 포함됩니다.
체크하지 않으면 체크된 세트만 역할에 표시됩니다. 새 프로필은 모든 세트가 체크된 채로 시작하므로 나중에 추가된 세트는 체크할 때까지 숨겨진 채로 있습니다.
체크하지 않고 체크된 세트가 없으면 선택기가 비어 있습니다.
페이지에 이미 있는 아이콘은 계속 표시됩니다. 프로필은 선택기가 제공하는 항목만 바꿉니다.

아이콘 세트 추가하기

아이콘 세트는 YAML 항목과 Drupal 라이브러리입니다. DXPR Builder는 설치된 모든 모듈과 테마에서 *.dxpr_icon_sets.yml을 읽습니다. 속성 참조와 alter 훅은 Custom Icon Sets에 있습니다.

다음을 만듭니다. 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는 모듈 폴더 기준이며 에디터에서 로드됩니다. 각 아이콘은 접두사와 하이픈으로 시작하는 접두사 클래스입니다.
다음에 라이브러리를 선언합니다. mymodule.libraries.yml에 라이브러리를 선언합니다. 방문자 페이지가 로드합니다.
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
다음으로 캐시를 지웁니다. drush cr로 캐시를 지웁니다.
다음을 체크하지 않은 모든 빌더 프로필에서 새 세트를 체크합니다. Check/Uncheck all Icon sets를 체크하지 않은 모든 빌더 프로필에서 새 세트를 체크합니다.
다음 요소의 설정을 열고 세트 드롭다운에서 선택합니다. Icon 요소의 설정을 열고 세트 드롭다운에서 Brand icons를 선택합니다.

사용자 정의 모듈은 alter 훅으로 선택기에서 세트를 제거할 수도 있습니다. 코드는 Hooks API reference에 있습니다. 포함 세트의 아이콘은 저장된 페이지에서 어차피 계속 로드됩니다. 제거된 사용자 정의 세트의 아이콘은 CSS 로드를 중단합니다. DXPR Builder는 등록된 세트가 지정한 라이브러리만 연결하기 때문입니다.

아이콘 세트가 없는 경우

드롭다운에 새 세트가 없습니다. YAML에 icons 목록이 없거나 캐시에 이전 레지스트리가 남아 있습니다. 목록을 추가하고 drush cr을 실행합니다.
일부 편집자에게만 세트가 없습니다. 빌더 프로필에서 체크하지 않았습니다. Icon sets 아래 /admin/dxpr_studio/dxpr_builder/profile 경로에서 체크합니다.
아이콘은 에디터에서만 보이고 방문자에게는 보이지 않습니다. 에디터는 세트의 css 파일을 로드하지만 방문자 페이지는 library를 로드합니다. library가 CSS 파일을 담은 mymodule.libraries.yml의 라이브러리를 지정하는지 확인합니다.

다음 단계

Custom Icon Sets에서 YAML 속성 참조와 alter 훅을 확인합니다.
Adding an Icon에서 Icon 요소 설정을 확인합니다.