Icon Lists

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-Icon-Title title=”Basic Icon List Items” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”QmFzaWM=” el_file1=”” el_file2=””]
[TS-VCSC-Icon-List icon=”ts-awesome-android”]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”ts-awesome-briefcase” color=”#dd9933″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”ts-awesome-calendar” color=”#81d742″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”ts-awesome-certificate” color=”#eeee22″]This is a pretty list item[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”ts-awesome-dashboard” color=”#1e73be” icon_size=”14″ font_size=”14″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”ts-awesome-comments” color=”#1e73be” icon_size=”14″ font_size=”14″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”ts-awesome-camera” color=”#1e73be” icon_size=”14″ font_size=”14″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”ts-awesome-chain” color=”#1e73be” icon_size=”14″ font_size=”14″]This is a pretty list item[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”ts-awesome-cogs” color=”#dd0000″ icon_size=”18″ font_size=”18″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”ts-awesome-envelope” color=”#dd0000″ icon_size=”18″ font_size=”18″]This is a pretty list item[/TS-VCSC-Icon-List][TS-VCSC-Icon-List icon=”ts-awesome-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=”ts-awesome-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=”20″][TS-VCSC-Icon-Title title=”Icon List Items with Animation” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”QW5pbWF0aW9u” el_file1=”” el_file2=””]
[TS-VCSC-Icon-List icon=”ts-awesome-briefcase” color=”#dd9933″ icon_size=”18″ font_size=”18″ animation_effect=”infinite” animation_class=”bounce”]List Item with Icon Animation[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”ts-awesome-thumbs-o-up” color=”#81d742″ icon_size=”18″ font_size=”18″ animation_effect=”infinite” animation_class=”lightSpeedIn”]List Item with Icon Animation[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”ts-awesome-calendar” color=”#1e73be” icon_size=”18″ font_size=”18″ animation_effect=”infinite” animation_class=”wobble”]List Item with Icon Animation[/TS-VCSC-Icon-List]
[TS-VCSC-Icon-List icon=”ts-awesome-heart” color=”#dd3333″ icon_size=”18″ font_size=”18″ animation_effect=”infinite” animation_class=”pulseGrow”]List Item with Icon Animation[/TS-VCSC-Icon-List]
[TS_VCSC_Info_Notice panel_type=”info” panel_icon=”ts-awesome-info-circle”]

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-Icon-Title title=”Icon List Items with Long Text + Hover Animation” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”TG9uZyUyQyUyMFRleHQ=” el_file1=”” el_file2=””]
[TS-VCSC-Icon-List icon=”ts-awesome-globe” color=”#1e73be” icon_size=”16″ font_size=”14″ animation_class=”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=”ts-awesome-road” color=”#dd3333″ icon_size=”16″ font_size=”14″ animation_class=”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=”ts-awesome-asterisk” color=”#dd9933″ icon_size=”16″ position=”right” font_size=”14″ text_align=”right” animation_class=”rotateFull”]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=”ts-awesome-pagelines” color=”#81d742″ icon_size=”16″ position=”right” font_size=”14″ text_align=”right” animation_class=”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_Info_Notice panel_type=”info” panel_icon=”ts-awesome-info-circle”]

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]