아이콘 라이브러리.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

사이트에 등록된 모든 아이콘 세트는 다음 요소의 아이콘 피커에 표시됩니다: 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 문서에 나와 있습니다.

역할별 아이콘 세트 제한

각 빌더 프로필에는 세트마다 상자와 Check/Uncheck all Icon sets 상자가 있는 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 요소의 설정입니다.