Element - Shortcodes: Icon List
Wednesday, June 25, 2014 12:19 AMShortcodes
[intense_icon_list]
[intense_icon_list_item]
Description
Adds a bulleted list of items to a page with the bullets being an icon of your choice. Several of the icon options are available to you.
Screenshots
Dialog
To add additional list items, click on the button. When done, press the insert button.
Attributes
intense_icon_list
Attribute | Type | Dialog Title | Description | Default | Available Values |
---|---|---|---|---|---|
mode | dropdown | Mode | shortcodes - Shortcodes inline - Inline | ||
source | icon_source | Source | font-awesome | ||
type | icon | Icon | see icon list in icon shortcode documentation | ||
color | color_advanced | Color | option colors - primary, error, info, inverse, muted, success, warning, link web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors) | ||
spin | checkbox | Spin | 1 = true, 0 = false | ||
rotate | dropdown | Rotate | - 90 - 90 degrees 180 - 180 degrees 270 - 270 degrees | ||
flip | dropdown | Flip | - horizontal - Horizontal vertical - Vertical | ||
stack_source | icon_source | Stack Source | font-awesome | ||
stack_type | icon | Stack Icon | see icon list in icon shortcode documentation | ||
stack_color | color_advanced | Stack Color | #ffffff | option colors - primary, error, info, inverse, muted, success, warning, link web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors) | |
class | text | CSS Class |
intense_icon_list_item
Attribute | Type | Dialog Title | Description | Default | Available Values |
---|---|---|---|---|---|
source | icon_source | Source | font-awesome | ||
type | icon | Icon | see icon list in icon shortcode documentation | ||
size | dropdown | Size | 1 - 1 2 - 2 3 - 3 4 - 4 5 - 5 | ||
color | color_advanced | Color | option colors - primary, error, info, inverse, muted, success, warning, link web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors) | ||
spin | checkbox | Spin | 1 = true, 0 = false | ||
rotate | dropdown | Rotate | - 90 - 90 degrees 180 - 180 degrees 270 - 270 degrees | ||
flip | dropdown | Flip | - horizontal - Horizontal vertical - Vertical | ||
stack_source | icon_source | Stack Source | font-awesome | ||
stack_type | icon | Stack Icon | see icon list in icon shortcode documentation | ||
stack_color | color_advanced | Stack Color | #ffffff | option colors - primary, error, info, inverse, muted, success, warning, link web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors) | |
custom_icon | image | Custom Icon | enter a WordPress attachment ID or a URL | WordPress ID or any URL |
Examples
[intense_row]
[intense_column size="2"]
<h3>Size 1 (default)</h3>
[intense_icon_list]
[intense_icon_list_item type="chevron-sign-right"]Icon List Item 1[/intense_icon_list_item]
[intense_icon_list_item type="bullseye" color="red"]Icon List Item 2[/intense_icon_list_item]
[intense_icon_list_item type="play-sign" color="primary"]Icon List Item 3[/intense_icon_list_item]
[intense_icon_list_item type="ok-sign" color="success"]Icon List Item 4[/intense_icon_list_item]
[intense_icon_list_item type="thumbs-up"]Icon List Item 5[/intense_icon_list_item]
[intense_icon_list_item type="repeat" spin="1"]Choose any icon[/intense_icon_list_item]
[/intense_icon_list]
[/intense_column]
[intense_column size="2"]
<h3>Size 2</h3>
[intense_icon_list]
[intense_icon_list_item type="chevron-sign-right" size="2"]Item 1[/intense_icon_list_item]
[intense_icon_list_item type="bullseye" color="red" size="2"]Item 2[/intense_icon_list_item]
[intense_icon_list_item type="play-sign" color="primary" size="2"]Item 3[/intense_icon_list_item]
[intense_icon_list_item type="ok-sign" color="success" size="2"]Item 4[/intense_icon_list_item]
[intense_icon_list_item type="thumbs-up" size="2"]Item 5[/intense_icon_list_item]
[/intense_icon_list]
[/intense_column]
[intense_column size="2"]
<h3>Size 3</h3>
[intense_icon_list]
[intense_icon_list_item type="chevron-sign-right" size="3"]Item 1[/intense_icon_list_item]
[intense_icon_list_item type="bullseye" color="red" size="3"]Item 2[/intense_icon_list_item]
[intense_icon_list_item type="play-sign" color="primary" size="3"]Item 3[/intense_icon_list_item]
[intense_icon_list_item type="ok-sign" color="success" size="3"]Item 4[/intense_icon_list_item]
[intense_icon_list_item type="thumbs-up" size="3"]Item 5[/intense_icon_list_item]
[/intense_icon_list]
[/intense_column]
[intense_column size="2"]
<h3>Size 4</h3>
[intense_icon_list]
[intense_icon_list_item type="chevron-sign-right" size="4"]Item 1[/intense_icon_list_item]
[intense_icon_list_item type="bullseye" color="red" size="4"]Item 2[/intense_icon_list_item]
[intense_icon_list_item type="play-sign" color="primary" size="4"]Item 3[/intense_icon_list_item]
[intense_icon_list_item type="ok-sign" color="success" size="4"]Item 4[/intense_icon_list_item]
[intense_icon_list_item type="thumbs-up" size="4"]Item 5[/intense_icon_list_item]
[/intense_icon_list]
[/intense_column]
[intense_column size="4"]
<h3>Size 5</h3>
[intense_icon_list]
[intense_icon_list_item type="chevron-sign-right" size="5"]Item 1[/intense_icon_list_item]
[intense_icon_list_item type="bullseye" color="red" size="5"]Item 2[/intense_icon_list_item]
[intense_icon_list_item type="play-sign" color="primary" size="5"]Item 3[/intense_icon_list_item]
[intense_icon_list_item type="ok-sign" color="success" size="5"]Item 4[/intense_icon_list_item]
[intense_icon_list_item type="thumbs-up" size="5"]Item 5[/intense_icon_list_item]
[/intense_icon_list]
[/intense_column]
[/intense_row]
[intense_lead]Pellentesque suscipit semper arcu at lacinia. Fusce est quam, tincidunt.[/intense_lead][intense_dropcap]I[/intense_dropcap]nteger tristique urna ut purus accumsan, id eleifend augue egestas. Quisque cursus metus leo, a molestie erat dignissim nec. Pellentesque ultrices lectus eu nunc congue tempus. Etiam eleifend libero eu elit porttitor pellentesque. Aliquam sit amet faucibus neque. Suspendisse et sagittis enim. Praesent malesuada dui ac pulvinar lobortis. Etiam eu lorem erat. Donec id massa nibh. In hac habitasse platea dictumst. Fusce gravida nulla non lectus facilisis porta. Nam eu tempus ipsum. Donec non justo id augue suscipit feugiat. Praesent non lacinia nisi, at elementum nibh. Nulla ac vestibulum mauris. Suspendisse venenatis magna ut egestas ullamcorper. Suspendisse et sagittis enim. Praesent malesuada dui ac pulvinar lobortis. Fusce gravida nulla non lectus facilisis porta. Quisque cursus metus leo, a molestie erat dignissim nec.
[intense_icon_list]
[intense_icon_list_item type="star"]Nunc pellentesque lectus quis ligula dictum vulputate. Aliquam ut placerat.[/intense_icon_list_item]
[intense_icon_list_item type="star"]Integer dignissim auctor facilisis. Vivamus laoreet, turpis in euismod sollicitudin.[/intense_icon_list_item]
[intense_icon_list_item type="star"]Etiam scelerisque luctus odio nec vehicula. Pellentesque diam tellus, rutrum.[/intense_icon_list_item]
[intense_icon_list_item type="star"]Etiam ac mi vitae purus malesuada consequat. Integer quis magna.[/intense_icon_list_item]
[/intense_icon_list]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in massa tortor. Vestibulum at nisl justo. Pellentesque sapien velit, aliquam id mauris in, ullamcorper tempor eros. Nullam rhoncus dui vel diam rutrum, sed aliquam justo interdum. Mauris non viverra diam. Aenean sollicitudin dui ac semper venenatis. Integer auctor massa ligula, posuere pellentesque sem euismod sed.
Vestibulum sit amet felis ut tellus dapibus mollis. Ut eu iaculis libero. Nullam facilisis eu purus eget euismod. Proin viverra diam vel libero tincidunt adipiscing. Suspendisse dui sapien, pulvinar eu nisl id, aliquet sodales ante. Nunc ullamcorper pellentesque enim, ut laoreet libero sagittis ut. Aliquam luctus feugiat nisl eget tempus. Nunc ac metus ante. Duis ultrices mauris ligula, id semper augue fermentum ac. Proin sagittis, felis non suscipit tincidunt, quam sem tempus massa, ac mattis enim mauris eget leo. Sed gravida sapien et orci fermentum aliquam. Donec nisi lectus, adipiscing quis tempus eget, laoreet nec nulla.
[intense_icon_list mode="inline" type="thumbs-up"]
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
[/intense_icon_list]