[title title="Features" underline="1" different_values="0" type="h1"]
[/title]
[html format="ckeditor" different_values="0"]
The following is a preview of appearance and behavior of LivIcons.
[/html]
[title title="Any color, any size" underline="1" different_values="0" type="h2"]
[/title]
[row different_values="0"]
[col tablet="4" desktop="4" style_margin_right="99" different_values="0"]
[html format="ckeditor" different_values="0"]
LivIcons are based on SVG (scalable vector graphic) in all modern browsers and on VML (Vector Markup Language) in IE6 - IE8. So these icons can be any size with good look at any devices. And, of course, any color can be applied too.
[/html]
[/col]
[col tablet="7" desktop="7" different_values="0"]
[styledcontainer border="frame border-radius" overlay="0" different_values="0" style_background_color="f5f5f5" extra_classes="text-small" type="content-block"]
[icon title="16px" color_type="1" fontawesome_size="24" livicon_size="16" different_values="0" style_color="000000" livicon="rocket" style_margin_left="9" type="livicon"]
[/icon]
[icon title="24px" color_type="1" fontawesome_size="24" livicon_size="16" different_values="0" style_color="#037ac5" livicon="rocket" style_margin_left="9" type="livicon"]
[/icon]
[icon title="32px" color_type="1" fontawesome_size="24" livicon_size="32" different_values="0" style_color="#0098ca" livicon="rocket" style_margin_left="9" type="livicon"]
[/icon]
[icon title="48px" color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#738d00" livicon="rocket" style_margin_left="9" type="livicon"]
[/icon]
[icon title="56px" color_type="1" fontawesome_size="24" livicon_size="56" different_values="0" style_color="#f89406" livicon="rocket" style_margin_left="9" type="livicon"]
[/icon]
[icon title="64px" color_type="1" fontawesome_size="24" livicon_size="64" different_values="0" style_color="#c10841" livicon="rocket" style_margin_left="9" type="livicon"]
[/icon]
[icon title="96px" color_type="1" fontawesome_size="24" livicon_size="96" different_values="0" style_color="#ff5c00" livicon="rocket" style_margin_left="9" type="livicon"]
[/icon]
[/styledcontainer]
[/col]
[/row]
[title title="Animated and static" underline="1" different_values="0" style_padding_top="75" type="h2"]
[/title]
[row different_values="0"]
[col tablet="4" desktop="4" different_values="0"]
[html format="ckeditor" different_values="0"]
The main feature is LivIcons are animated, but they can be static like any other icons too.
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0" extra_classes="text-center"]
[html format="ckeditor" different_values="0"]
We are animated!
[/html]
[html format="ckeditor" different_values="0" style_margin_top="80"]
We are static.
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0"]
[styledcontainer border="frame border-radius" overlay="0" different_values="0" style_background_color="f5f5f5" extra_classes="text-center" type="content-block"]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#fda425" livicon="sun" style_margin_left="9" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#fda425" livicon="settings" style_margin_left="9" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#fda425" livicon="cloud-rain" style_margin_left="9" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#fda425" livicon="hand-up" style_margin_left="9" type="livicon"]
[/icon]
[/styledcontainer]
[styledcontainer border="frame border-radius" overlay="0" different_values="0" style_background_color="f5f5f5" extra_classes="text-center" style_margin_top="20" type="content-block"]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#fda425" livicon="sitemap" style_margin_left="9" livicon_type="static" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#fda425" livicon="arrow-left" style_margin_left="9" livicon_type="static" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#fda425" livicon="facebook-alt" style_margin_left="9" livicon_type="static" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#fda425" livicon="info" style_margin_left="9" livicon_type="static" type="livicon"]
[/icon]
[/styledcontainer]
[/col]
[/row]
[title title="Click and hover events" underline="1" different_values="0" style_padding_top="75" type="h2"]
[/title]
[row different_values="0"]
[col tablet="4" desktop="4" different_values="0"]
[html format="ckeditor" different_values="0"]
LivIcons support two types of events: 'click' and 'hover'.
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0" extra_classes="text-center"]
[html format="ckeditor" different_values="0"]
We live on 'click'.
[/html]
[html format="ckeditor" different_values="0" style_margin_top="80"]
We live on 'hover'.
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0"]
[styledcontainer border="frame border-radius" overlay="0" different_values="0" style_background_color="f5f5f5" extra_classes="text-center" type="content-block"]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#0098ca" livicon="star-half" style_margin_left="9" livicon_type="click_animation" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#0098ca" livicon="info" style_margin_left="9" livicon_type="click_animation" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#0098ca" livicon="ghost" style_margin_left="9" livicon_type="click_animation" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#0098ca" livicon="help" style_margin_left="9" livicon_type="click_animation" livicon_hover="1" type="livicon"]
[/icon]
[/styledcontainer]
[styledcontainer border="frame border-radius" overlay="0" different_values="0" style_background_color="f5f5f5" extra_classes="text-center" style_margin_top="20" type="content-block"]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#0098ca" livicon="pacman" style_margin_left="9" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#0098ca" livicon="hammer" style_margin_left="9" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#0098ca" livicon="bug" style_margin_left="9" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#0098ca" livicon="cloud-sun" style_margin_left="9" livicon_hover="1" type="livicon"]
[/icon]
[/styledcontainer]
[/col]
[/row]
[title title="Looped animation" underline="1" different_values="0" style_padding_top="75" type="h2"]
[/title]
[row different_values="0"]
[col tablet="4" desktop="4" different_values="0"]
[html format="ckeditor" different_values="0"]
Animation can be repeated infinitely if appropriate.
Please don't get carried away with this option.
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0" extra_classes="text-center"]
[html format="ckeditor" different_values="0"]
Click to start/stop animations.
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0"]
[styledcontainer border="frame border-radius" overlay="0" different_values="0" style_background_color="f5f5f5" extra_classes="text-center" type="content-block"]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#738d00" livicon="refresh" style_margin_left="9" livicon_type="click_loop" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#738d00" livicon="cloud-snow" style_margin_left="9" livicon_type="click_loop" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#738d00" livicon="tag" style_margin_left="9" livicon_type="click_loop" livicon_hover="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#738d00" livicon="angle-double-up" style_margin_left="9" livicon_type="click_loop" livicon_hover="1" type="livicon"]
[/icon]
[/styledcontainer]
[/col]
[/row]
[title title="Original colors by default" underline="1" different_values="0" style_padding_top="75" type="h2"]
[/title]
[row different_values="0"]
[col tablet="4" desktop="4" different_values="0"]
[html format="ckeditor" different_values="0"]
This option matches to different icons with traditional colors, such as browsers, social networks.
Note: Not animated from v1.1!
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0" extra_classes="text-center"]
[html format="ckeditor" different_values="0"]
Icons with 'original' colors.
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0"]
[styledcontainer border="frame border-radius" overlay="0" different_values="0" style_background_color="f5f5f5" extra_classes="text-center" type="content-block"]
[icon color_type="0" fontawesome_size="24" livicon_size="48" different_values="0" livicon="twitter" style_margin_left="9" livicon_type="static" livicon_hover="0" type="livicon"]
[/icon]
[icon color_type="0" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#738d00" livicon="facebook-alt" style_margin_left="9" livicon_type="static" livicon_hover="0" type="livicon"]
[/icon]
[icon color_type="0" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#738d00" livicon="chrome" style_margin_left="9" livicon_type="static" livicon_hover="0" type="livicon"]
[/icon]
[icon color_type="0" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#738d00" livicon="ie" style_margin_left="9" livicon_type="static" livicon_hover="0" type="livicon"]
[/icon]
[/styledcontainer]
[/col]
[/row]
[title title="Shadowed" underline="1" different_values="0" style_padding_top="75" type="h2"]
[/title]
[row different_values="0"]
[col tablet="4" desktop="4" different_values="0"]
[html format="ckeditor" different_values="0"]
For webkit browsers you can apply css filter 'drop-shadow'.
Note: work in Chrome 18.0+, Safari 6.0+, iOS Safari 6.0+, Blackberry Browser 10.0+, Chrome for Android 25.0+
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0" extra_classes="text-center"]
[html format="ckeditor" different_values="0"]
We have a shadow.
[/html]
[/col]
[col tablet="4" desktop="4" different_values="0"]
[styledcontainer border="frame border-radius" overlay="0" different_values="0" style_background_color="f5f5f5" extra_classes="text-center" type="content-block"]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" livicon="quote-right" style_margin_left="9" livicon_hover="1" livicon_parent_trigger="0" livicon_shadow="1" style_color="#d40746" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#d40746" livicon="share" style_margin_left="9" livicon_hover="1" livicon_parent_trigger="0" livicon_shadow="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#d40746" livicon="info" style_margin_left="9" livicon_hover="1" livicon_parent_trigger="0" livicon_shadow="1" type="livicon"]
[/icon]
[icon color_type="1" fontawesome_size="24" livicon_size="48" different_values="0" style_color="#d40746" livicon="signal" style_margin_left="9" livicon_hover="1" livicon_parent_trigger="0" livicon_shadow="1" type="livicon"]
[/icon]
[/styledcontainer]
[/col]
[/row]
[title title="Call-to-action buttons" underline="1" different_values="0" style_margin_top="75" type="h2"]
[/title]
[row different_values="0"]
[col tablet="4" desktop="4" different_values="0"]
[button color_type="0" color="btn-success" different_values="0" type="block"]
[icon fontawesome_size="24" livicon="leaf" livicon_size="24" livicon_shadow="1" livicon_hover="0" color_type="1" style_color="ffffff" different_values="0" title=" Let's save the Planet together" livicon_parent_trigger="1" type="livicon"]
[/icon]
[/button]
[/col]
[col tablet="4" desktop="4" different_values="0"]
[button color_type="0" color="btn-info" different_values="0" type="block"]
[icon fontawesome_size="24" livicon="piggybank" livicon_size="24" livicon_shadow="1" livicon_hover="0" color_type="1" style_color="ffffff" different_values="0" title=" Buy today with discount" livicon_parent_trigger="1" type="livicon"]
[/icon]
[/button]
[/col]
[col tablet="4" desktop="4" different_values="0"]
[button color_type="0" color="btn-danger" different_values="0" type="block"]
[icon fontawesome_size="24" livicon="upload" livicon_size="24" livicon_shadow="1" livicon_hover="0" color_type="1" style_color="ffffff" different_values="0" title=" Upload now! It's totally safe!" livicon_parent_trigger="1" type="livicon"]
[/icon]
[/button]
[/col]
[/row]
[title title="Different types of promo and intro" underline="1" different_values="0" style_margin_top="75" type="h2"]
[/title]
[title title="Promo 1 example" underline="0" different_values="0" type="h6"]
[/title]
[row 0=""]
[col tablet="4" desktop="4"]
[service_box title="Web Design" icon="fa fa-picture-o" different_values="0" type="center_big"]
[html 0=""]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.[/html]
[/service_box]
[/col]
[col tablet="4" desktop="4"]
[service_box title="Graphic Design" icon="fa fa-wrench" different_values="0" type="center_big"]
[html 0=""]The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those intereste. It is a long established fact that a reader.[/html]
[/service_box]
[/col]
[col tablet="4" desktop="4"]
[service_box title="Internet Marketing" icon="fa fa-bug" type="center_big"]
[html 0=""]The readable content of a page when looking at its layout. The point of using. Duis aute irure dolor reprehenderit in voluptate velit esse cillum.[/html]
[/service_box]
[/col]
[/row]
[title title="Promo 2 example" underline="0" different_values="0" type="h6"]
[/title]
[row 0=""]
[col tablet="4" desktop="4"]
[service_box link="contact" title="Web Design" icon="fa fa-picture-o" type="left_medium"]
[html 0=""]Content management systens Virtual shops and ecommerce Presentation websites Online catalogues[/html]
[/service_box]
[/col]
[col tablet="4" desktop="4"]
[service_box link="contact" title="Graphic Design" icon="fa fa-wrench" type="left_medium"]
[html 0=""]The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those intereste.[/html]
[/service_box]
[/col]
[col tablet="4" desktop="4"]
[service_box link="contact" title="Internet Marketing" icon="fa fa-bug" type="left_medium"]
[html 0=""]Content management systens Virtual shops and ecommerce Presentation websites Online catalogues[/html]
[/service_box]
[/col]
[/row]
[title title="Metro Style" underline="1" different_values="0" style_margin_top="75" type="h2"]
[/title]
[icon fontawesome_size="24" livicon="comments" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="a200ff" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="shopping-cart" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="ff0097" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="tag" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="00aba9" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="settings" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="a05000" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="calendar" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="1ba1e2" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="wrench" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="e51400" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="rocket" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="f09609" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="info" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="f09406" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="laptop" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="01a5db" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="phone" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="84a200" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="responsive" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="e30746" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="signal" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="1ba1e2" type="livicon"]
[/icon]
[icon fontawesome_size="24" livicon="star-empty" livicon_size="32" livicon_hover="0" livicon_parent_trigger="0" livicon_shadow="0" color_type="1" style_color="ffffff" style_padding_left="26" style_padding_right="26" style_padding_top="26" style_padding_bottom="26" different_values="0" style_background_color="e51400" type="livicon"]
[/icon]
[title title="Pricing" underline="1" style_margin_top="75" different_values="0" type="h2"]
[/title]
[row 0=""]
[col desktop="6" wide="4" different_values="0"]
[pricing_table title="First Package" price="$199" price_top_text="Starting at" price_text="/month" livicon="shopping-cart" stars="3" read_more="Read More" color="default" description="The generated Lorem Ipsum is therefore always free from repetition, injected humour." different_values="0"]
[/pricing_table]
[/col]
[col desktop="6" wide="4" different_values="0"]
[pricing_table title="Second Package" price="$299" price_top_text="Starting at" price_text="/month" livicon="wrench" stars="4" color="default" read_more="Read More" different_values="0" link="shop" description="The generated Lorem Ipsum is therefore always free from repetition, injected humour."]
[/pricing_table]
[/col]
[col desktop="6" wide="4" different_values="0"]
[pricing_table title="Third Package" price="$399" price_top_text="Starting at" price_text="/month" link="shop" livicon="piggybank" stars="4" color="default" read_more="Read More" different_values="0" description="The generated Lorem Ipsum is therefore always free from repetition, injected humour."]
[/pricing_table]
[/col]
[/row]
[html format="ckeditor" different_values="0" style_margin_top="76"]
Full Icon List
New in LivIcons
Miscellaneous Web Icons
Arrows and Directional Icons
Text Control Icons
Video Player Icons
Socials, OSs, Browsers, JS libs and others Icons (not animated) - Just Static
Spinner Icons
Morphs Icons
[/html]