Diviでアイコンフォントボタンを作成する方法
公開: 2018-10-03アイコンフォントボタンは、Webデザインの世界で多くの用途があります。 フォントアイコンは、さまざまなサイズに拡大縮小しても色とデザインが鮮明なままなので、ボタンで使用するのが理にかなっています。 また、Diviでアイコンフォントボタンを作成するのは、Elegant IconFontを使用すると実際には非常に簡単です。 このチュートリアルでは、Diviのボタンモジュールでアイコンフォントを使用して単一のアイコンボタンを作成する方法を紹介します。
このチュートリアルのハイライトのいくつかは次のとおりです。
- エレガントフォントを使用してアイコンをボタンテキストとして追加する方法
- ボタンが完全な正方形または円の形になるようにするパディングと境界線の半径を追加する方法
- ホバー時にボタンアイコンを別のアイコンに置き換える方法
- 画像に重なるようにボタンアイコンを配置する方法
- もっと…
スニークピーク
これが今後の予定のスニークピークです…
何が必要
このチュートリアルでは、以下を使用します。
- ディビのテーマ（明らかに）
- エレガントなフォントアイコン–ブログ投稿からzipファイルをダウンロードすると、ボタンモジュールのカスタムフォントとして使用されるeleganticons.ttfフォントファイルがドラッグされます。
- ベッド＆朝食のホームページレイアウト（Divi Builderから無料で入手可能）
始めましょう！
ボタンモジュールにエレガントなアイコンフォントを追加する
ボタンモジュールを追加する
開始するには、新しいページを作成し、ビジュアルビルダーを展開します。 「BuildfromScratch」を選択し、ビジュアルビルダーがデプロイされたら、セクションに1列の行を追加してから、その行にボタンモジュールを追加します。
エレガントなアイコンフォントをドラッグします
エレガントアイコンフォントを入手するには、エレガントアイコンフォントのブログ投稿にアクセスして、フォントファイルをダウンロードしてください。 zipファイルの内容を抽出し、elegant_font> HTML CSS> fontsに移動して、エレガントなアイコンフォントファイルを見つけます。 次に、ファイル「ElegantIcons.ttf」をコンピューターファイルからドラッグして、ビジュアルビルダーにドロップします。
これにより、UploadFontモーダルが自動的に表示されます。 アップロードボタンをクリックするだけで、フォントをDiviBuilderにアップロードできます。
これで、ビジュアルビルダーでモジュールフォントをカスタマイズするときに、エレガントなアイコンフォントにアクセスできるようになります。
ボタンモジュールの設定に移動し、アップロードしたばかりの新しいエレガントアイコンフォントでボタンフォントを更新します。 「カスタムフォント」の下のアイコンのリストに表示されます。
ボタンのテキストが一連のアイコンに変換されていることに気付くかもしれません。 これは、ボタンのテキスト入力ボックスに入力された各文字に、現在使用されている文字/文字に対応するアイコンが付いているためです。
ボタンに使用するアイコンは1つだけなので、キーボードで任意の文字を選択して、その文字に関連付けられたアイコンを生成できます。 たとえば、ボタンのテキストに数字の5を入力すると、右の山形の矢印が表示されます。
ホバーの交換ボタンアイコン
ご存知のように、ボタンモジュールにはホバー時にアイコンを追加するオプションが含まれています。 この機能を使用して、アイコンフォントをホバーアイコンに置き換えて、ホバー効果を高めることができます。 次のようにボタン設定を変更するだけです。
ボタンのテキストサイズ：30px
ボタンアイコン：スクリーンショットを参照してください（これは、ボタンに使用されるアイコンフォントを置き換えるアイコンになります）
ボタンアイコンの色：＃0c71c3（これはボタンテキストに使用される色と一致する必要があります）
ボタンアイコンの配置：左
ボタンホバーテキストの色：rgba（255,255,255,0）（ホバー時にボタンアイコンフォントを非表示にするために、これは完全に透明です）
カスタムパディング：1em左、1em右（このパディングはボタンのデフォルトのパディングを上書きし、ホバー時に拡大しないようにします）
これで、カスタムcssのbefore要素のマージンをオーバーライドするだけで済みます。 [詳細設定]タブに移動し、[前]ボックスに次のCSSを入力します。
margin-left: 0 !important;
これで、ボタンアイコンがホバーのホバーアイコンに置き換えられます。
ボタンのテキストサイズに合わせて拡大縮小する完全な円のアイコンボタンを作成する
サークルボタンのデザインは、単一のアイコンボタンに非常に適しています。 また、ボタンモジュールの間隔の内部動作を理解していれば、ボタンのテキストサイズに応じて拡大縮小する完全な円形のボタンを作成できます。
秘訣は、「em」の長さの単位を使用してボタンの間隔を空けることです。 この長さの単位は、ボタンのテキストサイズを基準にしています。 したがって、ボタンのテキストサイズが30pxの場合、1emも30pxになります（2emは60pxなどになります…）。 これを知っていると、ボタンの周りのパディングが4つの側面すべてで同じになるようにする必要があります。 しかし、あなたが考慮しなかったかもしれないのは、ボタンのテキストの行の高さがデフォルトで1.7emであるということです。 つまり、上部と下部のパディング値を追加するときに、それを考慮する必要があります。
円ボタンを作成するために必要なパディング値の背後にある数学を知りたい人のために、ここに行きます：
左と右のパディングについては、両方を1emに設定します。 これは、ボタンの合計幅が90px（または3em）になることを意味します。理由は…
左パディング30px +アイコンフォント30px +右パディング30px =合計90px
ボタンのテキスト行の高さは1.7emで、これはボタンのテキストサイズ（30px）の170％に相当し、51pxに相当します。
上部と下部のパディングについては、両方を0.65emに設定します。 0.65emは、ボタンのテキストサイズ（30px）の65％に相当し、19.5pxに相当します。
したがって…
上部のパディングの19.5ピクセル+行の高さの51ピクセル+下部のパディングの19.5ピクセル=合計90ピクセル
これは、ボタンのテキストが30pxに設定されている場合、ボタンの合計サイズが90px x 90px（完全な正方形）になることを意味します。 実際、あなたはそれをこのように考えることができます。 ボタンのテキストサイズとして設定したものが何であれ、ボタンの合計サイズはその値の3倍になります。 したがって、40pxのボタンテキストは120px x120pxのボタンを作成します。
現在、ボタンの寸法は適切ですが、それでも正方形です。 正方形のボタンを完全な円形のボタンに変更するには、境界半径を50％追加するだけです。
ボタンを丸いボタンに変更するために必要なものは次のとおりです。
ボタンの境界半径：50％
カスタムパディング：上0.65em、下0.65em、右1em、左1em
ボタンのテキストサイズを調整でき、パディングがテキストのサイズに合わせて拡大縮小されるため、ボタンは完全に円形のままになることを忘れないでください。
Diviレイアウトへのアイコンボタンの追加
Diviを使用すると、既成のレイアウトのデザインに合わせて、単一のアイコンボタンを簡単に追加およびカスタマイズできます。
この例では、Bed＆Breakfastのホームページレイアウトに単一のアイコンボタンを追加する方法を紹介します。
ページにレイアウトを追加するには、ページの下部にある紫色のアイコンをクリックして設定メニューを開きます（ビジュアルビルダーが有効になっていることを確認してください）。 次に、[ライブラリからロード]アイコンをクリックします。 ベッド＆ブレックファーストのホームページレイアウトを選択し、[このレイアウトを使用]ボタンをクリックして、レイアウトをページに展開します。
画像へのアイコンボタンの追加
特定の製品またはサービスにリンクする追加のCTAの画像の隅にオーバーレイする小さなアイコンボタンを追加するとします。 あなたがする必要があるのは、画像の下にボタンモジュールを追加し、アイコンフォントを含むようにカスタマイズし、カスタムの間隔で画像と重なるようにすることです。
ホームページのレイアウトで「会社概要」セクションを見つけます。 次に、「ダブルルーム」を特徴とする画像の1つのすぐ下にボタンモジュールを追加します（これは、3列の行の最初の列の最初のモジュールです）。
次に、ボタンの設定を開き、ボタンのテキストボックスに大文字の「P」を入力します。 ボタンフォントとしてエレガントフォントを選択すると、これがアイコンに変わります。
ボタンのデザインとレイアウトのマッチングをすぐに開始するには、ボタンの設定を保存して、レイアウトの上部にある[今すぐ予約]ボタンを見つけます。 ボタン設定を開き、[ボタンオプション]を右クリックして[タイトルの切り替え]を選択し、リストから[ボタンスタイルのコピー]オプションを選択して、ボタンスタイルをコピーします。
次に、画像の下に追加したボタンモジュールを右クリックし、[ボタンスタイルの貼り付け]を選択します。
次に、ボタンの設定を次のように更新します。
ボタンフォント：エレガントフォント
ボタンの境界線の幅：0px
ボタンアイコンを表示：いいえ
次に、気の利いたカスタムパディングを追加して、ボタンが完全な正方形になるようにします。
カスタムパディング：上0.65em、下0.65em、左1em、右1em
画像の右下隅に重なるようにボタンを配置するには、最初に上の画像モジュールの下マージンを取り除く必要があります。 ボタンの真上にある画像の画像モジュール設定を開き、下マージンを0pxに設定します。
次に、ボタンの高さに等しいカスタムの負のマージン値を使用して、画像上でボタンを引き上げる必要があります。 これを行うには、ボタンの高さを決定する必要があります。 この投稿で前述したように、カスタムパディングを配置すると、現在のボタンのテキストサイズに基づいてボタンの正確なサイズを知ることができます。 ボタンのテキストサイズは20pxなので、ボタンの高さは3em（ボタンのテキストサイズの3倍）で60pxであることがわかります。 したがって、ボタンのカスタムマージンを次のように設定する必要があります。
カスタムマージン：-60pxトップ
次に、ボタンの配置を右に調整することで、ボタンを右に配置できます。
これで、画像とボタンのデザインが機能しました。 セクション内のすべての画像に同じボタンを追加するだけです。
画像の下マージンを削除したので、[スタイルの拡張]を使用して、セクション内のすべての画像にその変更を簡単に適用できます。 画像を右クリックして、「画像スタイルの拡張」を選択します。
[スタイルの拡張]ポップアップで、[全体]オプションの[このセクション]を選択し、[拡張]ボタンをクリックします。 これで、すべての画像の下マージンが0pxになりました。
最後のステップは、各画像の下にButtonモジュールをコピーして貼り付けるだけです。
これが最終的なデザインです。
また、適切な間隔の手法を使用したため、ボタンはモバイルでも所定の位置に留まります…
ボタンモジュールを使用して利用可能なアイコン
ボタンモジュールのボタンテキストはキーボードで使用できる文字に制限されているため、これらのキーを調べて、各キーに関連付けられている使用可能なアイコンを見つける必要があります。 これを行う簡単な方法は、ボタンフォントがエレガントフォントに設定されたボタンモジュールを作成し、ボタンテキストボックスに文字を入力することです。
これは、対応するフォントアイコンが付いた文字のスクリーンショットです。
このプロセスが制限されている場合は、いつでもテキストモジュールを使用して、ここにリストされているUnicodeを使用してアイコンリンクを作成できます。
最終的な考え
Diviのボタンモジュールでエレガントなアイコンフォントを使用すると、Webサイトの単一のアイコンボタンを作成するのに便利な方法です。 これにより、モジュール設定を工夫してボタンを独自のテキストスタイル、ホバー効果などでカスタマイズするための扉がいくつか開かれます。 私は、ボタンが完全な正方形または円の形をとることを保証するカスタムボタン間隔値が特に好きです。
アイコンボタンにはたくさんの用途があります。 うまくいけば、私がカバーしたユースケースの例があなた自身のプロジェクトに少しインスピレーションを与えるでしょう。
その他のアイデアについては、エレガントアイコンフォントの使用方法またはWebサイトにアイコンフォントを埋め込む方法を確認してください。
以下のコメントであなたからのいくつかのアイデアをここにしたいと思います。
乾杯！