Skip to Main Content

How to create buttons with icons on Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Buttons with fonts icons have many uses in the world of web design. Since icon fonts remain crisp in colors and design as they evolve to different sizes, it's a good idea to use them in buttons. And, creating a button with font-icons on Divi is actually pretty easy using the fonts in the library. ElegantIcons". In this tutorial, I'll show you how you can use icon fonts with the Divi button module to create a single icon button.

Some of the highlights of this tutorial include:

  • How to use ElegantIcons to add an icon as a button text
  • How to add padding and a border radius so that the button takes the shape of a perfect square or circle
  • How to replace the button icon with a different icon when flying over
  • How to position a button icon to overlay an image
  • and more…

Preview

Here's a preview of what's coming ...

icon font buttons

change the size of a divi button image.gif

demonstration button divi list delements.png

What do you need?

For this tutorial I will use the following:

  • Divi theme (obviously)
  • Stylish font icons, a tutorial on Elegant Theme is much more precise. Once you've downloaded the zip file from the blog post, we'll drag it to the eleganticons.ttf font file for use as a custom font for our button module.
  • The Bed & Breakfast homepage (available free from Divi Builder)

Let's start!

Add the Elegant Icons font to your button module

Add a button module

To begin, create a new page and deploy the visual builder. Choose "Generate From Zero," and then, after the visual generator is deployed, add a column row to the section and add a button module to the line.

add a button divi builder.jpg

Drag the font of the elegant icon

To get the color game ElegantFontsyou can download this font pack via this link. Extract the contents of the zip file and look for elegant icon font files by navigating to the elegant_font> CSS CSS> class. Then drag the "ElegantIcons.ttf" file onto your computer and drop it into the visual generator.

extract the zip file divi.jpg

This will bring up the modal Download the font automatically. Just click the download button to download the font to Divi Builder.

put online divi.jpg

Now you will have access to the elegant icon font when customizing a module font in the visual builder.

Go to the button module settings and update the button font with the new Elegant Icon font you just downloaded. It will appear in the list of icons under "Custom fonts".

button font divi.jpg

You may notice that your button text has been transformed into a bunch of icons. Indeed, each character entered in the text box of the button now has an icon corresponding to the letter / character currently used.

use of icon button.jpg

Since we only need one icon for our button, you can select any character on the keyboard to generate the icon associated with that character. For example, enter the 5 number for your button text to get a right chevron arrow.

icon button divi 5.jpg

Exchange button icons on the hover

As you know, the button module includes the option to add icons when hovering. We can use this feature to replace the icon font with the hover icon for a nice hover effect. All we need to do is change the button settings as follows:

Button Text Size: 30px Icon Button: see screenshot (this will be the icon that will replace the icon font used for the button) Color Button Icon: # 0c71c3 (this should match the color used for the button text ) Placement button icon: Left Button flyover text color: rgba (255,255,255,0) (This is completely transparent to hide the hover button icon font). Custom fill: 1em on the left, 1em on the right (this fill will replace expanding in hover)

customization button divi.jpg

Now, all we need to do is replace the margin for the front item in the custom css. Go to the Advanced tab and enter the following CSS code in the box before:

margin-left: 0 !important;

add a button margin diiv.png

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Now the icon of your button will be replaced by the hover flyover icon.

demonstration button replaced at hover.gif

Creating icon buttons with circle scaled with button text size

The circle buttons work great for single icon buttons. And, if you understand the inner workings of button module spacing, you can create perfectly circular buttons that fit the size of the button text.

The trick is to space your button using the unit of length "em". This unit of length is relative to the text size of your button. So if the size of the text of the button is 30px, 1em is also worth 30px (2em will be worth 60px and so on ...). Knowing this, we just need to make sure that our padding around our button will be the same on the 4 sides. But what you may not have considered is that the line height of the button text is 1.7em by default. This means that we must take this into consideration when we add our upper and lower fill values.

For those of you who want to know the math behind the fill values ​​needed to create circle buttons, here are:

For left and right fill, set both to 1em. This means that the total width of your button will be 90px (or 3em) because ...

30px padding left + 30px for font-icon + 30px padding right = 90px total

The height of the text line of the button is 1.7em, which is the equivalent of 170% of the text size of the button (30px) which is 51px.

For top and bottom fill, set both to 0,65em. 0.65em is the equivalent of 65% of the button text size (30px), which is equivalent to 19.5px.

Therefore…

19.5px upper padding + 51px line height + 19.5px lower padding = 90px total

This means that when the button text is set to 30px, the total size of the button will be 90px on 90px (a perfect square). In fact, you can think of it that way. Regardless of the size of the button text, the total size of the button is 3 times the value. Thus, a button text of 40 pixels will create a button of 120 pixels by 120 pixels, etc.

Right now, the button has the right dimensions, but it's still square. All we have to do is add an 50% border radius to change the square button to a perfect circle button.

Here's what you need to change your button to a circle button:

Border Radius button: 50%
Custom Upholstery: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left

modify a button.png

Remember, you can adjust the size of the button text and the button will stay perfectly in circle like filling the text size.

customize the size of the button.gif

Adding buttons on Divi

Divi makes it easy to add and customize unique icon buttons to fit the design of any predefined layout.

For this example, I will show you how to add a single icon button to the layout of the Bed & Breakfast home page.

To add the page layout to your page, open the settings menu by clicking on the purple icon at the bottom of the page (make sure the visual generator is enabled). Then click on the Load icon from the library. Select the layout of the Bed & Breakfast home page and click the "Use this layout" button to deploy the layout on the page.

select a layout divi.png

Adding an icon button to an image

Suppose you want to add a small icon button to superimpose the corner of an image to an additional CTA linked to a particular product or service. All you need to do is add a button module below the image and customize it to include the icon font and make sure that it overlaps the image with custom spacing.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Find the "About Us" section on the homepage. Then add a button module directly under one of the images used to present the "Double Room" (the first in the first column of the row of three columns).

divi.png button

Then open the button's settings and put a capital "P" in the button's text box. This will change in our icon once you select awesome background games like button font.

divi.png button text

To get started quickly to match the design of the button with the layout, save the settings of your buttons and find the "Book Now" button at the top of the layout. Open the button settings and copy the button styles by right-clicking on the Button Options Toggle title and selecting the "Copy Button Styles" option from the list.

Now, right-click on the module you added below the image and select "Paste button style".

paste the style.jpg module

Then update the button settings as follows:

Font Button: Awesome Font
font button Border width: 0px
Show button icon: NO

Then add our clever custom padding so that the button is a perfect square:

Custom Padding: 0.65em Top, 0.65em Bottom, 1em Left, 1em Right

icon font buttons

To position the button so that it covers the bottom right corner of the image, you must first remove the bottom margin of the image module above. Open the image module's image settings directly above the button and set the bottom margin to 0px.

customization of the button.png

Now, we have to pull the button on the image using a custom negative margin value equal to the height of the button. To do this, we must determine the height of our button.

As mentioned earlier in this article, with the custom fill in place, we can know the exact size of our button based on the current size of the button text. Since the size of the button text is 20px, we know that the height of our button is 3em (3 times the size of the button text), which is 60px. Therefore, we need to define a custom margin for our button as follows:

Custom Margin: -60px Top

And then we can position our button on the right by adjusting the alignment of the button on the right.

change the alignment of a divi.png button

Now that we have a functional design for our image and our button. All we have to do is add the same button to all the images in the section.

Since we removed the bottom margin of the image, we can easily apply this change to all images in the section using the Expand Styles option. Right-click on the image and select "Extend Image Styles".

extend image style.jpg

In the Extend Styles dialog box, select "This Section" for the option through and click the Expand button. Now all the images have a lower margin of 0px.

The last step is simply to copy and paste the Button modules under each image.

Here is the final design.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

final design button divi.png

And because we used proper spacing techniques, the button will also stay in place on the mobile ...

preview button on mobile.png

Icons available using the button module

Since the text of the button module button is limited to the characters available on the keyboard, you will need to explore these keys to find the available icons associated with each key. A simple way to do this is to create a button module with the button font set on the elegant font and type the characters in the button's text box.

Here's a screenshot of the characters with their corresponding font icon:

list of available icons divi.png

If you find this list not exhaustive, you can always use a text module to create icons links using the Unic codes listed. here .

Latest Thoughts

Using Elegant Icons with the Divi Button Module is a convenient way to create unique buttons for your website. This opens the door to creativity with module settings to customize your button with unique text styles, rollover effects, and more. I particularly like the spacing values ​​of custom buttons that ensure that the buttons take the shape of a perfect square or circle.

There are tons of uses for icon buttons. Hopefully, the example usage covered in this tutorial will add some inspiration to your own projects.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
6 shares
Share4
tweet
Save2