The Icon List Element creates a list of icons, images, or both on the same list.

Content Options

Items

Each item in the list contains these settings:

  • Title - Enter the text for the title of your item.
  • Icon - Choose the icon to display for your item.
  • Use Icon Text - You can enable this option if you want to display text instead of an icon.
  • Use Icon Image - You can enable this option if you want to display an image instead of an icon.
  • Link Title - Enter the link of the website you want to redirect your visitors to if they click this item.
  • Meta - Enter the text for the meta of your item.
  • Description - Enter the text for the description of your item.
  • Highlight - You can enable this option if you want to display a highlighted label for your item.
  • Highlight Label - Enter the text for the highlighted label of your item.

List Item

Margin

Sets the margin for all items.

Padding

Sets the padding for all items.

Align

Select the horizontal alignment for all items.

Direction

Choose the direction of the items either 'Horizontal Reversed' or 'Horizontal'.

Indent Gap

Sets the gap distance element within the container.

Odd Background

Sets the background color of the odd-numbered items in the list.

Even Background

Sets the background color of the even-numbered items in the list.

Auto Width

You can enable this option if you want to have auto width for all items.

Highlight

Block

You can enable this option if you want to display in block all highlights in the list.

Label Padding

Sets the padding for the highlight labels.

Label Background

Sets the background color of the highlight labels.

Label Typography

Customize the color, font, size, weight, family, style, line height, and letter spacing, and add shadow to the highlight labels.

Content Padding

Sets the padding for the list contents.

Content Background

Sets the background color for the list contents.

Content Border

Settings of the border for the list contents.

Content Text Color

Set the color of the list contents.

Title

Margin

Sets the margin for all item titles.

Title Tag

Select the HTML tag for all item titles.

Label Typography

Customize the color, font, size, weight, family, style, line height, and letter spacing, and add shadow for all item titles.

Title

Margin

Sets the margin for all icon wrappers (that could contain an icon, image, or text).

Padding

Sets the padding for all icon wrappers (that could contain an icon, image, or text).

Circle

Add another class to the span tag of the text or icon that displays it as a flex item and is aligned horizontally and vertically.

Height

Enter the number to set the height of the text or icon inside the icon wrapper.

Width

Enter the number to set the width of the text or icon inside the icon wrapper.

Image Width

Enter the number to set the width of the image inside the icon wrapper.

Icon Background

Sets the background color of the text or icon inside the icon wrapper.

Icon Typography

Customize the color, font, size, style, and decoration, and add shadow to the icon inside the icon wrapper.

Label Typography

Customize the color, font, size, weight, family, style, line height, and letter spacing, and add shadow to the text inside the icon wrapper

Icon Border

Settings of the border for all icon wrappers (that could contain an icon, image, or text).

Icon Box Shadow

Settings of the box shadow for all icon wrappers (that could contain an icon, image, or text).

Meta

Margin

Sets the margin for all meta contents in the list.

Typography

Customize the color, font, size, weight, family, style, line height, and letter spacing, and add shadow for all meta contents in the list.

Description

Typography

Customize the color, font, size, weight, family, style, line height, and letter spacing, and add shadow for all description contents in the list.

Separator

Disable

You can enable this option if you want to disable or hide the separator that separates the title from the meta.

Style

Sets the style for all separators in the list.

Width in PX

Enter the number to set the width for all separators in the list in px.

Height in PX

Enter the number to set the height for all separators in the list in px.

Color

Set the color for all separators in the list.