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.

Add

• Add an Icon using the Cwicly Quick inserter (recommended).

• Alternately, open the block inserter and click to add a Cwicly Icon block.

Select an Icon

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.

Icon Size

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.

Unless a size is specified, you will not be able to visualise the Icon.

Icon Colour

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.

Icon Margin and Padding

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.

Icon Border

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.