Icon
Last updated
Last updated
The button block integrates an icon element that can be added before or after the text.
You can modify the size and spacing of the icon.
You can also add a hover effect to your button block.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
The Icon property allows you to define whether you want to have a visible icon inside the button block.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Select required state: On or Off.
Use the Icon Selector to select the desired icon.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Click Icon logo to open the Icon Library.
Choose required icon.
The Icon Size property defines the size of the icon.
If no size is defined, the icon will not be visible.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Find the Icon Size property.
Input required value.
The Icon Spacing property allows you to define the size of the margin between the text and the icon inside the button block.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Find the Spacing property.
Input required value.
The Icon Position property allows you to define whether the icon should be placed before (to the left) or after (to the right).
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Find the Position property.
Input required value.
Select the desired position (before, after).
The hover property allows you to add a hover effect to your button. Possible effects include: none, grow, shrink, pulse, push, pop, bounce in, bounce out, rotate, zoom rotate, rise, set, levitate, de-levitate, skew, wiggle vertical, wiggle horizontal, shake out.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
In the Hover dropdown, select required effect.
