Create buttons with icons divi: Buttons with iconic fonts have many uses in the web design world. Since iconic fonts stay crisp in color and design as they scale to different sizes, it’s a good idea to use them in buttons. And, creating a button with iconic fonts on Divi is quite easy using the fonts from the “ ElegantIcons “ library. In this tutorial, I will show you how you can use icon fonts with the Create buttons with icons divi module to create a single icon button.
Adding the Elegant Icons font to your Create buttons with icons divi
Add a button module
To get started, create a new page and deploy the visual builder. Choose “Build from Scratch” and then, after the visual builder is deployed, add a column row to the section and then add a button module to the row.
Drag Stylish Icon Font
To get the ElegantFonts color set, you can download this font pack through this link. Extract the contents of the zip file and find the elegant icon font files by navigating to the elegant_font> HTML CSS> class. Then drag the “ElegantIcons.ttf” file onto your computer and drop it into the visual builder.
This will bring up the Automatically Download Font modal. Just click on the download button to download the font to Divi Builder.
Now you will have access to the stylish icon font when customizing a mod font in the visual builder.
Go to the Create buttons with icons divi 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”.
You might notice that your button text has been transformed into a bunch of icons. Each character entered in the button text input area now has an icon corresponding to the letter/character currently used.
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 number 5 for your button text to get a right chevron arrow.
Exchange button icons on hover
As you know, the Create buttons with icons divi module include the option to add icons on hover. We can use this feature to replace icon font with hover icon for a nice hover effect. All we need to do is change the button settings as follows:
Now, all we need to do is replace the margin for the front element in the custom CSS. Go to the Advanced tab and enter the following CSS code in the front box:
Now your button icon will be replaced with the hover-over icon.
Create buttons with icons divi with circle scaled with button text size
Circle-shaped 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 scale to the size of the button text.
The trick is to space your button out using the “em” unit of length. This unit of length is relative to the size of the text on your button. So if the button text size is 30px, 1em is also 30px (2em will be 60px and so on…). Knowing this, we just need to make sure that our padding around our button will be the same on all 4 sides. But what you might not have considered is that the button text line-height is 1.7em by default. This means that we have to consider this when we add our top and bottom padding values.
For those of you who want to know the math behind the padding values needed to create circle buttons, here is:
For left and right infill, set both to 1em. This means that the total width of your button will be 90px (or 3em) because …
30px of left padding + 30px for icon-font + 30px of right padding = 90px in total
The height of the button text line is 1.7em, equivalent to 170% of the button text size (30px) which is 51px.
For the top and bottom padding, set both to 0.65em. 0.65em is the equivalent of 65% of the button text size (30px), which is equivalent to 19.5px.
19.5px top padding + 51px row height + 19.5px bottom padding = 90px in total
This means that when the button text is set to 30px, the total button size will be 90px by 90px (a perfect square). 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. So, 40px button text will create a 120px by 120px button, etc.
At the moment, the button has the correct dimensions, but it is still square. All we need to do is add a 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:
Button Border Radius: 50%
Custom padding: 0.65em Top, 0.65em Bottom, 1st Right, 1st Left
Remember, you can adjust the button text size and the button will stay in a circle perfectly like the text size fill.
Adding buttons available to you on Divi
Divi makes it easy to add and customize unique icon buttons to fit the design of any preset layout.
For this example, I’ll show you how to add a single icon button to the Bed & Breakfast homepage layout.
To add the 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 from library icon. Select the layout of the Bed & Breakfast home page and click the “Use this layout” button to deploy the layout on the page.
Adding an icon button to an image
Suppose you want to add a small icon button to overlay the corner of an image with an additional CTA related 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’s font and have it overlap the image with custom spacing.
Look for the “About Us” section on the home page. Then add a button module directly below one of the images used to present the “Double Room” (the first in the first column of the row of three columns).
Then open the button settings and put a capital “P” in the button text box. This will change in our icon once you select the awesome background sets like the button font.
To quickly start matching the button design with the layout, save your button settings and find the “Book Now” button at the top of the layout. Open Button Settings and copy button styles by right-clicking 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”.
Then update the button settings as follows:
button : Font Awesome font button Border width: 0px
Show button icon: NO
Next, let’s add our nifty custom padding to make the button a perfect square:
Custom padding: 0.65em Top, 0.65em Bottom, 1em Left, 1em Right
To position the button so that it covers the lower right corner of the image, you must first remove the bottom margin from the image module above. Open the Image Image Module settings directly above the button and set the bottom margin to 0px.
Now we need to drag the button over the image using a custom negative margin value equal to the height of the button. To do this, we need to 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 button text size is 20px, we know our button height is 3em (3 times the button text size), which is 60px. Therefore, we need to set a custom margin for our button as follows:
Custom Margin: -60px High
And then we can position our button on the right by adjusting the alignment of the button on the right.
Now that we have a working design for our image and our button. All we have to do is add the same button to all images in the section.
Since we removed the bottom margin of the image, we can easily apply this change to all the images in the section using the Extend Styles option. Right, click on the image and select “Extend Picture Styles”.
In the Extend Styles dialog box, select “This Section” for the Across option and click the Expand button. Now all images have a 0px bottom margin.
The last step is to simply copy and paste the Button modules under each of the images.
And because we used proper spacing techniques, the button will also stay in place on the mobile …
Read more: How to create a pop-up demo video on Divi
Since the button module button text 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. An easy way to do this is to create a button module with the button font set to elegant font and type the characters in the button text box.
Using Elegant Icons with Divi’s 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, hover effects, and more. I especially like the custom button spacing values which ensure that the buttons take the shape of a perfect square or circle.
There are tons of uses for icon buttons. Hopefully, the usage example covered in this tutorial will add some inspiration to your projects.
For website maintenance service contact us.