{"id":1205,"date":"2014-09-19T17:21:20","date_gmt":"2014-09-19T17:21:20","guid":{"rendered":"http:\/\/progressivewp.staging.wpengine.com\/?page_id=1205"},"modified":"2014-09-19T17:21:20","modified_gmt":"2014-09-19T17:21:20","slug":"livicons","status":"publish","type":"page","link":"https:\/\/www.pratikosgb.com\/index.php\/livicons\/","title":{"rendered":"LivIcons"},"content":{"rendered":"

Features<\/h1><\/div>\n\t
\n\t\t
\n\t\t\t

The following is a preview of appearance and behavior of LivIcons.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div>

Any color, any size<\/h2><\/div>
\n\t
\n\t\t
\n\t\t\t

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.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>16 px<\/span>
<\/div>24 px<\/span>
<\/div>32 px<\/span>
<\/div>32 px<\/span>
<\/div>56 px<\/span>
<\/div>64 px<\/span>
<\/div>96 px<\/span><\/div><\/div><\/div><\/div><\/div><\/div>

Animated and static<\/h2><\/div>
\n\t
\n\t\t
\n\t\t\t

The main feature is LivIcons are animated, but they can be static like any other icons too.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

We are animated!<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>
<\/div>
<\/div>
<\/div><\/div><\/div><\/div>
<\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

We are static.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>
<\/div>
<\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Click and hover events<\/h2><\/div>
\n\t
\n\t\t
\n\t\t\t

LivIcons support two types of events: ‘click’ and ‘hover’.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

We live on ‘click’.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>
<\/div>
<\/div>
<\/div><\/div><\/div><\/div>
<\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

We live on ‘hover’.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>
<\/div>
<\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Looped animation<\/h2><\/div>
\n\t
\n\t\t
\n\t\t\t

Animation can be repeated infinitely if appropriate.<\/p>\n

Please don’t get carried away with this option.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Click to start\/stop animations.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>
<\/div>
<\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Original colors by default<\/h2><\/div>
\n\t
\n\t\t
\n\t\t\t

This option matches to different icons with traditional colors, such as browsers, social networks etc.<\/p>\n

Note: Not animated from v1.1!<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Icons with ‘original’ colors.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>
<\/div>
<\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Shadowed<\/h1><\/div>
\n\t
\n\t\t
\n\t\t\t

For webkit browsers you can apply css filter ‘drop-shadow’.<\/p>\n

Note: work in Chrome 18.0+, Safari 6.0+, iOS Safari 6.0+, Blackberry Browser 10.0+, Chrome for Android 25.0+<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

We have a shadow.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>
<\/div>
<\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Animation start with event on an icon or on its parent<\/h2><\/div>
\n\t
\n\t\t
\n\t\t\t

You can trigger events ‘click’ or ‘hover’ on an icon itself or on its parent element.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

‘Onparent’ option.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/i>On button<\/a> <\/span><\/i>On icon<\/a><\/div><\/div><\/div><\/div><\/div><\/div>

Spinners<\/h2><\/div>
\n\t
\n\t\t
\n\t\t\t

For spinner icons the special behavior is defined. If looped they work as traditional spinners.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

On this demo ‘loop’ is disabled. This is pseudo loop, just 10 iterations.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>I’m looped<\/span>
<\/div>I’m not<\/span><\/div><\/div><\/div><\/div><\/div><\/div>

Morphs<\/h2><\/div>
\n\t
\n\t\t
\n\t\t\t

Morphs are a special category recomended to use as backgrounds for any desired block.<\/p>\n

Note: Childs elements need absolute positioning.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Morphs behavior is totaly different from other icons.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

<\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Examples – where to use<\/h1><\/div><\/div><\/div><\/div>

Call-to-action buttons<\/h2><\/div>
<\/i>Let’s save the Planet together<\/a><\/div><\/div><\/div>
<\/i>Buy today with discount<\/a><\/div><\/div><\/div>
<\/i>Upload now! It’s totally safe!<\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Metro style<\/h2><\/div>
<\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/div>

Full Icon List<\/h1><\/div><\/div><\/div><\/div>

New in LivIcons<\/h2><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Features The following is a preview of appearance and behavior of LivIcons. Any color, any size 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 [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"templates\/template-full-width.php","meta":{"footnotes":""},"class_list":["post-1205","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pratikosgb.com\/index.php\/wp-json\/wp\/v2\/pages\/1205"}],"collection":[{"href":"https:\/\/www.pratikosgb.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pratikosgb.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pratikosgb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pratikosgb.com\/index.php\/wp-json\/wp\/v2\/comments?post=1205"}],"version-history":[{"count":0,"href":"https:\/\/www.pratikosgb.com\/index.php\/wp-json\/wp\/v2\/pages\/1205\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pratikosgb.com\/index.php\/wp-json\/wp\/v2\/media?parent=1205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}