Icon
An Icon is a visual anchor that helps capture the user’s attention and direct them to specific actions.
The
icon block allows you to add icons to your page in a matter of seconds.The
icon block is a specifically designed block that allows you to add pre-defined and custom SVG icons with a few clicks.
- Alternately, open the block inserter and click to add a Cwicly Icon block.
Use the Icon Selector to select the desired icon.
You can choose from four different Icon libraries, including Font Awesome, Phosphor Light, Phosphor Regular, Phosphor Duotone.
- In the Primary tab, open the Icon tab and click the Icon icon to open the Icon library.
- Make sure that Active is toggled on.
- Select a library in the dropdown and select required icon.
The Icon Size property defines the size of the icon.
- Select an
iconblock. - Open the Block Inspector.
- Navigate to the Primary tab.
- Open the Icon tab.
- Find the Icon Size property.
- Enter the desired value.
Unless a size is specified, you will not be able to visualise the Icon.
The Icon colour can be selected in the Primary tab.
- Select an
iconblock. - Open the Block Inspector.
- Navigate to the Primary tab
- Open the Colours tab.
- Select required Icon and Background colours using the colour picker.
You can style an Icon by adjusting the Margin and Padding.
- Select an
iconblock. - Open the Block Inspector.
- Navigate to the Primary tab.
- Open the Margin and Padding tab.
- Adjust Margin and Padding as required.
The Icon Border property allows you to add a border to an Icon and adjust radius, style, colour and width.
- Select an
iconblock. - Open the Block Inspector.
- Navigate to the Primary tab.
- Open the Border tab.
- Adjust Border properties as required.
Last modified 2mo ago