Buttons with iconic fonts have many uses in the web design world. Since iconic fonts stay crisp in colors 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 actually quite easy using the fonts from the library " ElegantIcons". In this tutorial, I will 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 border radius to make the button look like a perfect square or circle
- How to replace the button icon with a different icon when hovering
- How to position a button icon to overlay an image
- and more…
Preview
Here's a preview of what's coming ...
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 into the eleganticons.ttf font file to use as a custom font for our buttons module.
- The Bed & Breakfast home page (available free from Divi Builder)
Let's start!
Add the Elegant Icons font to your button module
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 color game ElegantFontsyou can download this font pack via this link. Extract it contents from the zip file and find the elegant icon font files by navigating to elegant_font > HTML CSS > class. Then drag the “ElegantIcons.ttf” file to 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 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”.
You might notice that your button text has turned into a bunch of icons. Indeed, 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 button module includes the option to add icons on hover. 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 Button icon: see screenshot (this will be the icon that will replace the font icon used for the button) Icon Button Color: # 0c71c3 (which should match the color used for the button text ) Button Icon Placement: Left Button hover text color: rgba (255,255,255,0) (this is completely transparent in order to hide the font of the hover button icon). Custom fill: 1st left, 1st right (this fill will replace expanding while hovering)
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:
margin-left: 0 !important; |
Now your button icon will be replaced with the hover over icon.
Creative icon buttons 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 take this into consideration when we add our top and bottom padding values.
For those of you who want to know the calculation 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 padding left + 30px for font-icon + 30px padding right = 90px total
The height of the button text line is 1.7em, which is equivalent to 170% of the button text size (30px) which is 51px.
For top and bottom infill, 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 button size will be 90px by 90px (a perfect square). In fact, you can think of it that way. Regardless of the button text size, the total button size 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:
Border Radius button: 50%
Custom Upholstery: 0.65em Top, 0.65em Bottom, 1em Straight, 1em 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 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'll show you how to add a single icon button to the Bed & Breakfast home page layout.
To add the layout to your page, open the settings menu by clicking 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 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 the 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:
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
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 Image Image Module settings directly above the button and set 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 Top
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 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 0px bottom margin.
The last step is simply to copy and paste the Button modules under each image.
Here is the final design.
And because we used proper spacing techniques, the button will also stay in place on the mobile ...
Icons available using the button module
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.
Here is a screenshot of the characters with their corresponding font icon:
If you find this list somewhat exhaustive, you can always use a text module to create icon links using the listed Unic codes. here .
Latest Thoughts
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 that ensure 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 own projects.
