[TS-VCSC-Spacer height=”20″]

ICON LIST ITEMS

CREATE SINGLE LIST ITEMS WITH ICONS

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″]

Ever wanted to show a fancy list with something else then normal bullet points? Maybe even use icons instead and assign different colors? Visual Composer Extensions come with a simple but effective “Icon List Element” that allows you to do just that. You can even apply a CSS3 tooltip and a link to each individual list item .

[TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”fa fa-css3″ font_title_family=”Default:regular” font_content_family=”Default:regular”]

You can assign a CSS3 animation to each icon, either as an infinite animation that is active all the time, or as an animation triggered when hovering over the list item. There are over 70 different animations to select from.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”fa fa-info-circle” font_title_family=”Default:regular” font_content_family=”Default:regular”]

When used with long text strings, the text wraps correctly next to the icon, just like a normal ul list would do. You can also position the icon on the right side, instead of the left one, and define the text alignment (left / right / center / justify).

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″]
[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”20″]

LIST ITEM EXAMPLES

CREATE SINGLE LIST ITEMS WITH ICONS

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Icon-List icon=”fa fa-android”]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-briefcase” color=”#dd9933″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-calendar-check-o” color=”#81d742″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-certificate” color=”#eeee22″]This is a pretty list item[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”fa fa-database” color=”#1e73be” icon_size=”14″ font_size=”14″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-comments-o” color=”#1e73be” icon_size=”14″ font_size=”14″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-camera” color=”#1e73be” icon_size=”14″ font_size=”14″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-chain-broken” color=”#1e73be” icon_size=”14″ font_size=”14″]This is a pretty list item[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”fa fa-cogs” color=”#dd0000″ icon_size=”18″ font_size=”18″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-envelope” color=”#dd0000″ icon_size=”18″ font_size=”18″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-floppy-o” color=”#dd0000″ icon_size=”18″ font_size=”18″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”fa fa-book” color=”#dd0000″ icon_size=”18″ font_size=”18″]This is a pretty list item[/TS-VCSC-Icon-List]

While this is not an actual ul list, it looks like one. That allows you to assign a different icon with a different color to each item in the list. You can even change the font size in between list items.

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Icon-List icon=”fa fa-briefcase” color=”#dd9933″ icon_size=”18″ font_size=”18″ animation_effect=”infinite” animation_class=”bounce” css3animations_in=”Bounce”]List Item with Icon Animation[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”fa fa-thumbs-up” color=”#81d742″ icon_size=”18″ font_size=”18″ animation_effect=”infinite” animation_class=”lightSpeedIn” css3animations_in=”Light Speed In”]List Item with Icon Animation[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”fa fa-calendar-check-o” color=”#1e73be” icon_size=”18″ font_size=”18″ animation_effect=”infinite” animation_class=”wobble” css3animations_in=”Wobble Standard”]List Item with Icon Animation[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”fa fa-heart” color=”#dd3333″ icon_size=”18″ font_size=”18″ animation_effect=”infinite” animation_class=”pulseGrow” css3animations_in=”Pulse Grow”]List Item with Icon Animation[/TS-VCSC-Icon-List]
[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Icon-List icon=”fa fa-globe” color=”#1e73be” icon_size=”16″ font_size=”14″ animation_class=”spin” css3animations_in=”Spin”]Phasellus sed placerat erat, eget aliquam arcu. Mauris egestas consectetur pellentesque. Vivamus commodo turpis nibh. Sed ligula velit, egestas nec tortor vel, scelerisque sodales lorem. Sed vel elit vel nisi accumsan facilisis et sit amet nunc. Maecenas interdum aliquet ipsum, sed malesuada nisl rhoncus sed. Suspendisse quis hendrerit odio. Aenean pretium pulvinar tellus et mollis. [/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”fa fa-road” color=”#dd3333″ icon_size=”16″ font_size=”14″ animation_class=”swing” css3animations_in=”Swing”]Phasellus sed placerat erat, eget aliquam arcu. Mauris egestas consectetur pellentesque. Vivamus commodo turpis nibh. Sed ligula velit, egestas nec tortor vel, scelerisque sodales lorem. Sed vel elit vel nisi accumsan facilisis et sit amet nunc. Maecenas interdum aliquet ipsum, sed malesuada nisl rhoncus sed. Suspendisse quis hendrerit odio. Aenean pretium pulvinar tellus et mollis. [/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”fa fa-asterisk” color=”#dd9933″ icon_size=”16″ position=”right” font_size=”14″ text_align=”right” animation_class=”rotateFull” css3animations_in=”Rotate Full”]Phasellus sed placerat erat, eget aliquam arcu. Mauris egestas consectetur pellentesque. Vivamus commodo turpis nibh. Sed ligula velit, egestas nec tortor vel, scelerisque sodales lorem. Sed vel elit vel nisi accumsan facilisis et sit amet nunc. Maecenas interdum aliquet ipsum, sed malesuada nisl rhoncus sed. Suspendisse quis hendrerit odio. Aenean pretium pulvinar tellus et mollis. [/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”fa fa-pagelines” color=”#81d742″ icon_size=”16″ position=”right” font_size=”14″ text_align=”right” animation_class=”flash” css3animations_in=”Flash”]Phasellus sed placerat erat, eget aliquam arcu. Mauris egestas consectetur pellentesque. Vivamus commodo turpis nibh. Sed ligula velit, egestas nec tortor vel, scelerisque sodales lorem. Sed vel elit vel nisi accumsan facilisis et sit amet nunc. Maecenas interdum aliquet ipsum, sed malesuada nisl rhoncus sed. Suspendisse quis hendrerit odio. Aenean pretium pulvinar tellus et mollis. [/TS-VCSC-Icon-List]
[TS-VCSC-Spacer height=”40″]