--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' title: 'DXPR BuilderのFont Awesome 7 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:19:57+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'DXPR Builderは同梱のFont Awesome Freeアイコンをバージョン6.7.2から7.3.1に更新します。ページは編集なしで動作し続けます。保存ページの各アイコンは同じサイズと位置で描画されます。アイコン自体は再描画のため、見た目が少し変わります。このページでは変更内容と、更新後に確認が必要な数少ない箇所を説明します。' tags: - 'Install and update' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'DXPR BuilderのFont Awesome 7' description: 'DXPR Builderは同梱のFont Awesome Freeアイコンをバージョン6.7.2から7.3.1に更新します。ページは編集なしで動作し続けます。保存ページの各アイコンは同じサイズと位置で描画されます。アイコン自体は再描画のため、見た目が少し変わります。このページでは変更内容と、更新後に確認が必要な数少ない箇所を説明します。' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:19:57+0000' dateModified: '2026-10-24T17:19:22+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/getting-started/font-awesome-7' articleSection: インストールと更新 - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' description: 'DXPR Builderは同梱のFont Awesome Freeアイコンをバージョン6.7.2から7.3.1に更新します。ページは編集なしで動作し続けます。保存ページの各アイコンは同じサイズと位置で描画されます。アイコン自体は再描画のため、見た目が少し変わります。このページでは変更内容と、更新後に確認が必要な数少ない箇所を説明します。' 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 --- [ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ここから始める](/ja/hc/documentation/learn-dxpr-builder/start-here) /[インストールと更新](/ja/hc/documentation/learn-dxpr-builder/start-here/install) # DXPR BuilderのFont Awesome 7. DXPR Builderを学ぶここから始めるインストールと更新 ## このガイドの内容 関連ガイド - [アイコンライブラリー](/ja/hc/documentation/learn-dxpr-builder/customization/icon-libraries) - [Iconエレメントの追加](/ja/hc/documentation/learn-dxpr-builder/elements/icon) - [DXPR Builderの更新](/ja/hc/documentation/learn-dxpr-builder/getting-started/updating) - [変更履歴](/ja/hc/documentation/learn-dxpr-builder/getting-started/changelog) DXPR Builderは同梱のFont Awesome Freeアイコンをバージョン6.7.2から7.3.1に更新します。ページは編集なしで動作し続けます。保存ページの各アイコンは同じサイズと位置で描画されます。アイコン自体は再描画のため、見た目が少し変わります。このページでは変更内容と、更新後に確認が必要な数少ない箇所を説明します。 ## ページ上の変更点 - **新しいアイコンデザイン。** Font Awesome 7はアイコンを太めの丸い形状に再描画します。Regular（アウトライン）アイコンは線が太くなります。ブランドロゴはほぼ変わりません。 - **レイアウトは同じ。** Font Awesome 7は初期値で各アイコンに固定幅を付けます。そのままでは狭いアイコンが右に寄ります。DXPR BuilderはページとエディターでFont Awesome 6の振る舞いを保つため、アイコンの位置と間隔はそのままです。再描画で少し狭くなったアイコンもあります（houseやtruckなど）。`fa-fw`クラス付きのアイコン（ソーシャルリンクなど）は、以前どおり固定幅のままです。 - **クラス名は同じ。** 保存ページは`fas fa-house`のようなアイコンクラスを保持します。Font Awesome 4と5のクラスも互換スタイルで動作し続け、同じ464の旧名をカバーします。 ## 変更前と変更後 各タイルに1つのアイコンを2つ並べます。左のグレーがFont Awesome 6.7.2、右の黒がFont Awesome 7.3.1です。 ## 新しいアイコン アイコンピッカーの一覧は1895から1992の無料アイコンに増えます。 | スタイル | Font Awesome 6.7.2 | Font Awesome 7.3.1 | |---|---|---| | Solid | 1402 | 1422 | | Regular | 163 | 169 | | Brands | 495 | 572 | 103の新アイコンには、Claude、Copilot、Gemini、Fediverse、Codeberg、Forgejoのようなブランドロゴと、黄道十二宮が含まれます。 ## 改名と削除のアイコン 5つのアイコンが新名になりました。旧名を使うページも、Font Awesome 7が旧名を受け付けるため表示は続きます。アイコンピッカーには新名のみ出ます。 | 旧名 | 新名 | |---|---| | `user-large` | `user` | | `user-large-slash` | `user-slash` | | `headphones-simple` | `headphones` | | `handshake-simple` | `handshake` | | `handshake-simple-slash` | `handshake-slash` | 1つのアイコンが無料セットから外れます。`vector-square`です。Font Awesome 7では有料Pro版のみのため、`fa-vector-square`を使うページは更新後にアイコンが出ません。`draw-polygon`や`object-group`のような無料アイコンに置き換えます。 ## 変わらない内容 - **ライセンス。** Font Awesome Freeの条件は同じです。アイコンはCC BY 4.0、フォントはSIL OFL 1.1、コードはMITです。 - **ライブラリー名。** Drupalライブラリーはマシン名`dxpr_builder/elements.font_awesome_6_free`を保ちます。保存ページとカスタムコードが参照するためです。読み込むのはFont Awesome 7になりました。 - **ブラウザー対応。** Font Awesome 7はWOFF2フォントのみ同梱です。DXPR Builder対応のすべてのブラウザーがWOFF2を読めます。 ## 更新後のサイト確認 1. **コンテンツ内の`fa-vector-square`**を検索し、上記の手順で置き換えます。 2. **Font Awesomeアイコンを自前で描くカスタムテーマCSSを確認します。** Font Awesome 7はフォント名を「Font Awesome 7 Free」と「Font Awesome 7 Brands」に変えます。`font-family`に「Font Awesome 6 Free」や「Font Awesome 6 Brands」を`content`コードポイントと合わせて指定するCSSでは、アイコンが出なくなります。新名を使うか、Font Awesome 7提供の`--fa-family-classic`と`--fa-family-brands`カスタムプロパティーを使います。 3. **テーママークアップの`sr-only`依存を確認します。** Font Awesome 6定義の`sr-only`クラスは、Font Awesome 7にはありません。それで隠したテキストが見えるようになります。Bootstrap 5テーマでは代わりに`visually-hidden`を使えます。 4. **DXPR Builderコンテンツ外のテーマアイコンを確認します。** メニューやフッターなどDXPR Builderページ外でテーマが描くアイコンは、Font Awesome 7の固定幅に従います。そこでも旧幅を保つには、コンテナに`--fa-width: auto`を設定します。 5. **キャッシュを消去します。** `drush cr`を実行し、CDNやリバースプロキシーキャッシュをパージして、訪問者に新しいスタイルシートとフォントを届けます。 ## 次のステップ - [アイコンライブラリー](/ja/hc/documentation/learn-dxpr-builder/customization/icon-libraries)：DXPR Builder付属のアイコンセットとロール別の制限方法を確認できます。 - [アイコンの追加](/ja/hc/documentation/learn-dxpr-builder/elements/icon)：ページにアイコンを置き、スタイルを設定します。 - [DXPR Builderの更新](/ja/hc/documentation/learn-dxpr-builder/getting-started/updating)：モジュールを安全に更新します。 - [変更履歴](/ja/hc/documentation/learn-dxpr-builder/getting-started/changelog)：各リリースの変更内容を確認できます。