DXPR BuilderのFont Awesome 7.
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を読めます。
更新後のサイト確認
- コンテンツ内の
fa-vector-squareを検索し、上記の手順で置き換えます。 - 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カスタムプロパティーを使います。 - テーママークアップの
sr-only依存を確認します。 Font Awesome 6定義のsr-onlyクラスは、Font Awesome 7にはありません。それで隠したテキストが見えるようになります。Bootstrap 5テーマでは代わりにvisually-hiddenを使えます。 - DXPR Builderコンテンツ外のテーマアイコンを確認します。 メニューやフッターなどDXPR Builderページ外でテーマが描くアイコンは、Font Awesome 7の固定幅に従います。そこでも旧幅を保つには、コンテナに
--fa-width: autoを設定します。 - キャッシュを消去します。
drush crを実行し、CDNやリバースプロキシーキャッシュをパージして、訪問者に新しいスタイルシートとフォントを届けます。
次のステップ
- アイコンライブラリー：DXPR Builder付属のアイコンセットとロール別の制限方法を確認できます。
- アイコンの追加：ページにアイコンを置き、スタイルを設定します。
- DXPR Builderの更新：モジュールを安全に更新します。
- 変更履歴：各リリースの変更内容を確認できます。