最新の Beaver Builder アップデートには強力な機能が組み込まれており、今日デモできることを非常に楽しみにしています。 Font Awesome、Zurb の Foundation Icons、WordPress の Dashicon に加えて、Icomoon または Fontello で独自のアイコン フォントを作成し、アップロードして Beaver Builder インターフェイス内で直接使用できるようになりました。コーディングは必要ありません。

カスタムフォントの作成

このデモでは Icomoon アプリを使用しますが、Fontello を使用する場合でも手順は同様になります。まず、Icomoon サイトにアクセスし、右上隅にある大きなIcomoon アプリボタンをクリックします。

Icomoon アプリを起動すると、フォントを作成するために選択できる無料のアイコンが表示されます。そこで提供されているもの以外のものが必要な場合は、独自のアイコンをアップロードするか、無料およびプレミアム ライブラリから他のアイコンを追加できます。

選択内容の構築が完了したら、右下隅にある[フォントの生成]タブをクリックして、ダウンロードする新しいアイコン フォントを生成できます。

[フォントの生成] 画面では、アイコンの選択と、フォントをダウンロードする前にフォントの設定を調整するためのさまざまな方法が表示されます。通常はデフォルト設定で問題ありませんが、複数のアイコン フォントをアップロードする予定がある場合は、特に変更する必要がある設定があります。この設定には、ヘッダーの [設定]ボタンをクリックしてアクセスでき、そのタイトルは[クラス プレフィックス]です。

クラス プレフィックス設定は、Beaver Builder レイアウトに追加されたときにページ上のアイコンを識別するのに役立ちます。変更しないままにすると、 icon-接頭辞を使用する複数のアイコン フォントが競合し、Beaver Builder のアイコン セレクター内で一部が正しく表示されなくなります。この設定は、 my-icon1-やmy-icon2-など、任意の値に変更できますが、最も重要なことは、変更されたことです。

Beaver Builder のアイコン セレクター内でカスタム アイコン フォントを簡単に識別できるように、フォント名の設定を変更することもできます (Fontello のカスタム名を選択することが必須です)。設定の微調整が完了したら、右下隅にある [ダウンロード]ボタンをクリックして、新しいアイコン フォントを Beaver Builder にアップロードする準備を整えます。

アイコン フォントを Beaver Builder にアップロードする

カスタム アイコン フォントを Beaver Builder にアップロードするには、WordPress サイトにログインし、[設定] > [ページ ビルダー] > [アイコン] に移動します。そこから[アイコン セットのアップロード]ボタンをクリックし、ネイティブ WordPress メディア アップローダーを使用して Icomoon からダウンロードした zip ファイルをアップロードします。その後、アップロードした zip ファイルを選択し、 「ファイルの選択」ボタンをクリックして、カスタム アイコン フォントを Beaver Builder に追加します。ページが更新され、カスタム アイコン フォントが、下の図のように、使用可能な Beaver Builder アイコン フォントのリストに表示されます。

使用可能なアイコン フォントの管理

独自のカスタム アイコン フォントをアップロードするだけでなく、Beaver Builder 内でどのセットを有効または無効にするかを管理したり、アップロードしたカスタム アイコン フォントを完全に削除したりする機能も提供されています。これは、独自のカスタム セットで使用できるアイコン フォントの選択を制限したい場合や、Beaver Builder を使用してページを編集するクライアントのために選択をシンプルに保ちたい場合に最適な機能です。

アイコンフォントを無効にするのは比較的簡単です。オフにしたいアイコンフォントのチェックを外し（またはオンにしたいフォントにチェックを入れて）、 「アイコン設定を保存」ボタンをクリックするだけです。アップロードしたカスタム アイコン フォントを削除するには、削除するアイコン フォントの名前の横にある[削除]リンクをクリックします。

大いなる力には大いなる責任が伴う

アイコン フォントは素晴らしく、Web サイトのコンテンツにスパイスを加えるのに非常に役立ちますが、注意が必要です。複数のアイコン フォント セットにアクセスできるからといって、それらをすべて同じページで使用する必要があるというわけではありません。なぜだめですか？ページの読み込み速度！

Font Awesome と Foundation のアイコンを同じページに追加したとします。これらのアイコンをレンダリングするには、Beaver Builder で Font Awesome と Foundation の両方のスタイルシートとフォント ファイルを読み込む必要があり、ページの読み込み時間が長くなります。同じページで複数のアイコン フォントを使用するのではなく、できるだけ 1 つ以上のアイコン フォントに留めてください。最良の結果を得るには、必要なアイコンのみを含む独自のアイコン フォントを作成し、それを代わりに使用してください。

楽しむ！

この新機能を気に入っていただき、Beaver Builder ツールボックスへの追加として役立つことを願っています。いつものように、ご質問やフィードバックがございましたら、以下のコメント欄でお気軽にお知らせください。楽しむ！

画像クレジット: Thomas S.