This block allows you to place an icon in a list format. Easily create a bulleted list using the Gutenberg Icon List block.
How To Add The Icon List Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Icon List or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get one Icon List. You can add more icon lists by clicking on the plus ‘+‘ icon.
How To Configure The Icon List Block #
Configure Parent Block #
General #
Layout – Decide the layout of the list to be displayed from the two options; horizontal, vertical.
Hide Labels – You can display or hide the text from here.
Gap between Items and Gap between Icon and Label option is to manage the space for the icon list.
Font Family – Choose the font family for the text from various options provided in the dropdown.
Labels Font Size – You can increase or decrease the font size of the text from here. You can also set the responsive values for the Mobile and Tablet view.
Labels Font Weight – Choose the font weight for the text from the various options provided in the dropdown.
Labels Line Height – Set the line height for the text from here. The Gap between Icon and Label option is to manage the space for the icon list.
Icon Alignment – This manages the Icon Position with respect to the Label.
Icon Size – Increase or decrease the size of the icon from here. You can also set the responsive values for Mobile and Tablet view.
Background Size – Increase or decrease the size of the icon’s background. You can also set the responsive values for Mobile and Tablet view.
Border – Set the border width of the icon from here.
Border Radius – You can give border-radius to the box from here.
Style Parent Block #
Label Typography– You can set the typography options such as Font Family, Font Size, Font Weight, Line Height for Labels.
Configure Child Block #
Icon Settings #
Select Source – Choose an icon or an image to display in the block.
Icon – Choose an icon for an individual item from a number of options.
List Item Link #
Disable Link – Add or Remove link to the list item by using this toggle button.
Upon Enabling link i.e. keeping the toggle in OFF state, the following options will appear.
URL – Add URL of the link you want to add to the list item.
Open in New Tab – Decide whether to open a link in the new tab or the current one using this toggle button.
Style Child Block #
Icon Color Settings #
Under this tab, color options are available for Text, Icon, Icon Background, Icon Border.
Color can be selected for two different categories: Normal and Hover.