The Icon List Gutenberg Block is a great way to display a list of items with icons.
1. How to add Icon List Block? #
To add the Icon List Block in your Gutenberg editor first click on (+) icon then in the search box type “Icon List” and you will see the “Icon List” block.
After inserting the “Icon List” block you will get the default look like below. Now you need to change the preset and other settings.
2. General Settings #
The General settings tab has the Preset option and counter settings number settings option. The General settings panel properties are as follows.
- Presets: From our pre-defined presets you can select which style you like
- Icon/ Image: Set Media Type if icon then select the icon, if image then selects the custom image.
- Items: You can add items and also can set individual icons for each item.
- Content: Set Horizontal or vertical style layout, alignment, icon alignment and icon position.
3. Style Settings #
From the Styles settings tab, you can set all possible styles typography, color, padding, background, and other style settings.
- List item: Set the typography, the gap between items normal and hover color, background, padding, and Border.
- Icon/ Image: You can set the Gap between the icon and label, normal and hover color, background, size, and dimension.
- Border: Set border normal and hover border style and border-radius.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set the default border or hover border with different border styles and also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
