Adding an icon to a page of your site is quick and easy. To get started, drag the Icon component to a page of your site, then click on it. The component options panel will open on the side of the editor so you can customize the icon.
Icon
To change which icon is used with the component, click on the icon at the top of the options panel. This will load a popup showing some of the icons available as well as a search bar. There are a large number available. Click on the icon you wish to use, then click Done.
Note: There are around 1400 icons available - see this browsable list of icons.
If you want to make the icon link to another page or website, click on the Add Link button and choose a link.
Size & Position
You can change the size and position of the component with the options in this group. Size behaves exactly as you’d expect; with the Position option you can align the icon to the right, left, or center of the component.
Design
The options found in this group control the styling of the component.
- Text Color - With this option you can customize the color of the icon.
- Shape - If your icon has a border, by default it inherits the shape setting used by your site. You can override that by changing this option.
- Background - By default your icon will have no background, but you can customize it with this option to a color, gradient, or image.
- Border - With this option you can customize the width, color, and style of a border surrounding your icon.
Spacing
The Margin option in this group allows you to control the space around the icon within the component. The Padding option allows you to control the space between the border and the icon itself.
Hover
To control how the icon displays when a visitor hovers over it with a mouse, click on Hover at the top of the options panel. You can customize the Text Color, Border, Background, and Scale, which adjusts the size of the icon by a percentage.