--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/icon-libraries' title: 'アイコンライブラリー | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:27:06+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- アイコンピッカーがあるのはIconエレメントとCircle counterエレメントで、サイトに登録されたすべてのアイコンセットが表示されます。DXPR Builderは14セットを同梱しています。モジュールとテーマはYAMLファイルで追加できます。このページでは同梱セットを一覧し、読み込み方法を説明し、追加方法を示します。ロール別の表示制限にはビルダープロファイルを使います。詳しくはユーザープロファイルをご覧ください。 同梱アイコンセット セットはdxpr_builder.dxpr_icon_sets.ymlに登録されています。 tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:27:06+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: アイコンライブラリー description: |- アイコンピッカーがあるのはIconエレメントとCircle counterエレメントで、サイトに登録されたすべてのアイコンセットが表示されます。DXPR Builderは14セットを同梱しています。モジュールとテーマはYAMLファイルで追加できます。このページでは同梱セットを一覧し、読み込み方法を説明し、追加方法を示します。ロール別の表示制限にはビルダープロファイルを使います。詳しくはユーザープロファイルをご覧ください。 同梱アイコンセット セットはdxpr_builder.dxpr_icon_sets.ymlに登録されています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:27:06+0000' dateModified: '2026-10-24T11:27:06+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/icon-libraries' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/icon-libraries' description: |- アイコンピッカーがあるのはIconエレメントとCircle counterエレメントで、サイトに登録されたすべてのアイコンセットが表示されます。DXPR Builderは14セットを同梱しています。モジュールとテーマはYAMLファイルで追加できます。このページでは同梱セットを一覧し、読み込み方法を説明し、追加方法を示します。ロール別の表示制限にはビルダープロファイルを使います。詳しくはユーザープロファイルをご覧ください。 同梱アイコンセット セットはdxpr_builder.dxpr_icon_sets.ymlに登録されています。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # アイコンライブラリー. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [カスタムアイコンセット](/ja/hc/documentation/learn-dxpr-builder/development/icon-sets) - [Icon](/hc/documentation/learn-dxpr-builder/elements/icon) アイコンピッカーがあるのは**Icon**エレメントと**Circle counter**エレメントで、サイトに登録されたすべてのアイコンセットが表示されます。DXPR Builderは14セットを同梱しています。モジュールとテーマはYAMLファイルで追加できます。このページでは同梱セットを一覧し、読み込み方法を説明し、追加方法を示します。ロール別の表示制限にはビルダープロファイルを使います。詳しくは[ユーザープロファイル](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)をご覧ください。 ## 同梱アイコンセット セットは`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のマシン名を保持しています。保存済みページとカスタムコードが参照するためです。変更点は[DXPR BuilderのFont Awesome 7](/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7)に一覧があります。 ## ピッカーとページのアイコン読み込み セットのドロップダウンは**All icon sets**から始まり、アイコン一覧のある登録済みセットをすべて一覧します。`fa`以外の同梱13セットには組み込み一覧があるため、DXPR Builderのみのサイトには14エントリが表示されます。他のモジュールやテーマのセットは、表示のためにYAML内の`icons`一覧が必要です。 編集者がアイコンを選ぶと、エレメントはアイコンのクラス(例: `bi bi-star`)とライブラリー名を保存します。訪問者がダウンロードするのはページが使うアイコンフォントのみです。エディターではET Line、Pixeden、Glyphiconはエディター自体と一緒に読み込まれ、ピッカーは開くときに他のセットのスタイルシートを読み込みます。 編集者のアイコン選択とスタイル方法は[アイコンの追加](/hc/documentation/learn-dxpr-builder/elements/icon)にあります。 ## ロールごとのアイコンセット制限 各ビルダープロファイルには**Icon sets**グループがあり、セットごとのボックスと**Check/Uncheck all Icon sets**ボックスがあります。設定は**DXPR Studio** > **DXPR Builder** > **User Profiles**で行います。手順は[ユーザープロファイル](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)にあります。グループの動作は次のとおりです。 - チェックがあるのは**Check/Uncheck all Icon sets**で、その場合ロールはすべてのセット(後から追加されたものを含む)を表示できます。 - チェックがない場合はチェックしたセットのみ表示されます。新しいプロファイルはすべてのセットにチェックした状態で始まるため、後から追加されたセットはチェックするまで非表示のままです。 - チェックがなく、セットにもチェックがない場合はピッカーが空になります。 - ページ上の既存アイコンは引き続き表示されます。プロファイルが変えるのはピッカーの提供内容のみです。 ## アイコンセットの追加 アイコンセットはYAMLエントリとDrupalライブラリーの組み合わせです。DXPR Builderはインストール済みのすべてのモジュールとテーマから`*.dxpr_icon_sets.yml`を読み取ります。プロパティリファレンスとalterフックは[カスタムアイコンセット](/hc/documentation/learn-dxpr-builder/development/icon-sets)にあります。 1. 作成するのは`mymodule/mymodule.dxpr_icon_sets.yml`です。 ```yaml brand: label: 'Brand icons' prefix: brand css: css/brand-icons.css library: mymodule/brand_icons icons: - 'brand brand-logo' - 'brand brand-arrow' ``` `css`はモジュールフォルダーからの相対パスで、エディターで読み込まれます。各アイコンはプレフィックスと、プレフィックス＋ハイフンで始まるクラスの組み合わせです。 2. 宣言するのは`mymodule.libraries.yml`です。訪問者のページが読み込みます。 ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. キャッシュは`drush cr`でクリアします。 4. 新しいセットにチェックするのは**Check/Uncheck all Icon sets**にチェックのないすべてのビルダープロファイルです。 5. 開くのは**Icon**エレメントの設定で、セットドロップダウンで**Brand icons**を選びます。 カスタムモジュールはalterフックでピッカーからセットを削除することもできます。コードは[Hooks APIリファレンス](/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_icon_sets_alter)にあります。同梱セットのアイコンは保存済みページで引き続き読み込まれます。削除されたカスタムセットのアイコンはCSSの読み込みを停止します。DXPR Builderがアタッチするのは登録済みセットが指定するライブラリーのみのためです。 ## アイコンセットがない場合 - **新しいセットがドロップダウンにありません。**YAMLに`icons`一覧がないか、キャッシュが古いレジストリーを保持しています。一覧を追加して`drush cr`を実行します。 - **一部の編集者にのみセットがありません。**そのビルダープロファイルがチェックしていません。**Icon sets**配下(`/admin/dxpr_studio/dxpr_builder/profile`)でチェックします。 - **アイコンはエディターに表示されるが訪問者には表示されません。**エディターはセットの`css`ファイルを読み込みますが、訪問者のページは`library`を読み込みます。`library`がCSSファイルを含む`mymodule.libraries.yml`内のライブラリーを指定していることを確認します。 ## 次のステップ - [カスタムアイコンセット](/hc/documentation/learn-dxpr-builder/development/icon-sets)：YAMLプロパティリファレンスとalterフック。 - [アイコンの追加](/hc/documentation/learn-dxpr-builder/elements/icon)：Iconエレメントの設定。