Icon
Last updated
Was this helpful?
Last updated
Was this helpful?
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 icon block.
Open the Block Inspector.
Navigate to the Primary tab.
Open the Icon tab.
Find the Icon Size property.
Enter the desired value.
The Icon colour can be selected in the Primary tab.
Select an icon block.
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 icon block.
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 icon block.
Open the Block Inspector.
Navigate to the Primary tab.
Open the Border tab.
Adjust Border properties as required.
Add an Icon using the Cwicly (recommended).
