Beaver Builderでカスタムアイコンセットを追加する方法
Beaver Builderでページを構築中、求めているアイコンがBeaver Builderの既存の選択肢にない時、どうすればいいのか、その対応策をご紹介します。
私は、X（旧Twitter）のアイコンを使いたかった際に、BeaverBuilderのアイコンリストに、その選択肢があかったので、以下の手順で、カスタムアイコンセットを作成し、それをBeaver Builderに追加することで対応をしました。
この方法を使えば、サイトのデザインをさらにオリジナルで個性的なものにできそうですね！
カスタムアイコンセットの作り方
まずは、カスタムアイコンセットの作成から始めましょう。これにはIcoMoonアプリやFontelloといったツールが役立ちます。これらを使用して、提供されているアイコンセットから選んだり、自分のアイコンをアップロードして独自のセットを作ることができます。
IcoMoonアプリを使った場合
- IcoMoonアプリを開き、必要なアイコンを選びます。アイコンライブラリボタンを使って無料または有料のライブラリから選ぶことができます。
- 自分のアイコンを使う場合は、トップツールバーの「Import icons」からアップロードします。
- アイコンを選んだら、「Generate font」をクリックしてフォントセットを確認します。
- 「Preferences」を開いて、Beaver Builderで見分けやすいフォント名に変更してください。
- クラスプレフィックスを「icon-」から変更するのも忘れずに。これにより、Beaver Builder内でのアイコンの表示がスムーズになります。
- 「CSS Selector」セクションを開いて、「Use attribute selectors」または「Use a class」を選びます。
- 最後に「Download」をクリックしてzipファイルをダウンロードします。
Fontelloを使った場合
- Fontelloサイトに行き、必要なアイコンを選んだり、SVGアイコンをドラッグしてアップロードします。
- アイコンセットが決まったら、右上隅のフィールドにカスタムフォント名を入力します。
- 「Download webfont」をクリックしてzipファイルをダウンロードします。
Beaver Builderへのインポート方法
作成したカスタムアイコンセットをBeaver Builderに追加しましょう。
- WordPressの管理画面から「設定 > Beaver Builder > アイコン」に進みます。
- 「アイコンセットをアップロード」をクリックして、ダウンロードしたzipファイルを選択します。
- アイコンセットがアップロードされたら、「ファイルを選択」をクリックします。
- カスタムアイコンセットは、アイコン設定リストに以下の名前で表示されます
これで完了！
あとは、いつも通り、アイコンモジュールなどでアイコンリストを表示すると、自分で決めた名前でアイコンが表示されているはずです。
