Icon button
A link button with text and an optional icon on the left or the right, each with its own background. Use it when you want the icon in its own box next to the text.
Add it
- In Bricks › Fancy Bricks, turn on Button Widget.
- In the builder, add Fancy Button (category fancy-bricks). It isn't nestable.
Settings
All the settings are in the Content tab.
Button
| Control | What it does | Default |
|---|---|---|
| Text | The button's text. | Click me |
| Link | Where it goes. Opening in a new tab is supported. | # |
| Icon | An optional icon. | — |
| Icon Position | Left or Right of the text. Shows when there's an icon. | Left |
| Icon Spacing | Space between the icon and the text. | 8px |
Button Settings
The text part of the button: Button Background Color, Button Typography, Button Border and Button Padding.
Icon Settings
The icon part, when there's an icon: Icon Background, Icon color and Icon height (default 2em).
Tips
- If you work with the Fancy Bricks templates, the FBK Button component also has an icon and shares the library's style families. See Components.