Thank you for purchasing LivIcons! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. If you like these animated icons please rate them with . Thanks so much!
As you see Livicons are animated vector icons (except brand names ones), so there are not any images like JPGs, PNGs or GIFs. All their appearance and behaviour are based on Javascript program code. So they can be animated or static, with any color and size with good look at usual and high resolution devices. Livicons are being created with SVG (Scalable Vector Graphic) in all modern browsers and VML (Vector Markup Language) in IE6 - IE8. Their integration is not difficult.
Added new 9 animated and 18 static (Brandnames) icons.
You don't need jQuery method .each() to add, remove or update LivIcons for any class any more, when you work via JavaScript.
Now script will not add LivIcon to a container with already existing icon.
Some code improvement for more accurate behaviour when you have any LivIcon inline in Morph icons.
Added 65 new animated icons.
Added the ability to work with icons dynamically via three new JS methods.
Added support for changing the color for the 'active' class of icons or their parents' elements.
Now script will not override the IDs which you define for element with class .livicon.
Some code improvement for hiding variables from global namespace and preventing SVG rendering bugs in Firefox and IE9.
First of all upload to your hosting these JS files: jquery-1.9.1.min.js (if you don't use it already), raphael-min.js and livicons-1.0.min.js (or file that you prepeared with 'LivIcons Customizer', which is described below). After that you need to declare these JS files in a <head> section or before closing </body> tag in your HTML one.
Note: Min. needed version of jQuery is 1.6.3
For example:
<script src="jquery-1.9.1.min.js"></script> <script src="raphael-min.js"></script> <script src="livicons-1.2.min.js"></script>
If you want LivIcons work in IE6 - IE7 upload json2.min.js and add the following code in your <head> section:
<!--[if lt IE 8]> <script src="json2.min.js"></script> <![endif]-->
You should do this because IE6 and IE7 don't recognize the JSON format by default.
Basically you don't need any specific CSS rules to use with LivIcons. The script will automaticaly add "width" and "height" for all LivIcons.
Sometimes to correct vertical align you need to play with values of line-height and height styles (for height one you should specify !important;)
For example: With Bootstrap, when an icons' size is 16px:
.livicon {
display: inline-block;
line-height: inherit;
vertical-align: middle;
height: 18px!important;
}
Add to your html code a <div>, <span>, <li> or <i> with class .livicon and define necessary data- attributes. Every icon on page can get ten (10) (since v1.1) data- attributes, which set its behaviour and appearance. But don't be affraid you do not always need to define all these parameters.
The main: for the most icons on your website you specify the default settings in the script code itself. This can be done in two ways. The first is to change default values of the variables in your LivIcons script. Second, to use the Customizer, which is more easier and comfortable. Working with the last one is described below.
After that if you want that any icon should have another size, color, animation iterations, speed, etc. you should set its individual data- attributes.
And that's all!
Now there are three new methods: .addLivicon(), .removeLivicon() and updateLivicon(). So you can add, delete, update any icons "on the fly". Detail explanation is below.
As was described above you can edit default settings in your LivIcons js file.
Note: More preferable way is to use the Customizer.
Open LivIcons js file. There you will find something like the following code (values may vary):
var defname = "tag", // default icon name
defsize = 32, // default size in pixels
defcolor = "#777", // default color value ('original'
// or #XXX or #XXXXXX
// or for ex. 'blue' )
defhovercolor = "#000", // default color on hover (#XXX or
// #XXXXXX or ex. 'red')
defchangecoloronhover = true, // change color on hover or
// do not( true or false)
defeventtype = "hover", // default event type ('hover' or
// 'click')
defanimated = true, // animated by default or not
// (true or false)
deflooped = false, // animation is repeated or not
// (true or false)
defonparent = false, // bind click or hover event on
// parent element containing a
// livicon (true or false)
morphduration = 200, // transition time for morph
// icons (milliseconds)
hoverduration = 200; // transition time for changing
// color on hover (milliseconds)
activeclass = "activeicon", // name of the class for active state
// of icons (new in v1.2)
activeparentclass = "active", //name of the parent's class for active
// state of icons (new in v1.2)
defactivecolor = "red"; //default color for active state class
// (#XXX or #XXXXXX or ex. 'red')-new in v1.2
All of these options will affect the behavior of the all icons by default. The comments above quite explain the effect of each parameter. One thing needed to explain separately is color value set to 'original'. It means that script takes colors from itself code. Socials icons and others such of them have their own colors, rest of icons set the color value to '#333'.
So if you stay defaults as above and put livicon's call in your HTML file like this:
<i class="livicon" data-name="tag"></i>, you will get this icon:
'Active' state of icons (new in v1.2).
From now you can define the color changing for 'active' state of icons. If you add class activeicon (or any name which you can define with the Customizer) to element where a livicon will appear or add class active (or any name which you can define with the Customizer) to a parent element which contains a livicon, then the color will change to a value defined in the variable defactivecolor.
<i class="livicon activeicon" data-name="check-circle-alt" data-color="blue"></i>
The result ('red', not 'blue'):
<div class="parent active"> <i class="livicon" data-name="check-circle-alt" data-color="blue"></i> </div>
The result ('red', not 'blue'):
If you need or want to change color without reloding a page, you can do that by something like this:
$('#my_cool_icon').addClass('activeicon').updateLivicon();
Each icon on a page can look and move differently from the rest of ones. This can be done by specifying individual data attributes data-...for HTML element with class livicon.
There are ten attributes you can play.
I coded two notations: full and short.
data-... attribute has a higher priority for a corresponding icon and will override the global defaults parameters.Full notation:
<span class="livicon" data-name="tag" data-size="32" data-color="original" data-hovercolor="#000" data-animate="true" data-loop="false" data-iteration="3" data-duration="0" data-eventtype="hover" data-onparent="false"> </span>
Short notation:
<span class="livicon" data-n="tag" data-s="32" data-c="original" data-hc="#000" data-a="1" data-l="0" data-i="3" data-d="0" data-et="hover" data-op="0"> </span>
Of course you can write that in one string:
<span class="livicon" data-n="tag" data-s="32" data-c="original" data-hc="#000" data-a="1" data-l="0" data-i="3" data-d="0" data-et="hover" data-op="0"></span>
The result of executing the code above will be:
Let's take a closer look at an each attribute.
data-name or data-n
Define name of an icon will appear.
<span class="livicon" data-name="tags"></span>
The result:
data-size or data-s
Define the canvas size (width and height) of an icon (in pixels).
<span class="livicon" data-name="truck" data-size="24"></span>
The result:
<span class="livicon" data-name="truck" data-size="48"></span>
The result:
data-color or data-c
Define the color of an icon. Can be set to "original" or any HEX value or standard browsers' values like for ex. "blue"
<i class="livicon" data-name="check-circle-alt" data-color="blue"></i>
The result:
<i class="livicon" data-name="check-circle-alt" data-color="#ff45bf"></i>
The result:
data-hovercolor or data-hc
Define the color change on hover of an icon. Can be set to "true", "false" or any HEX value or standard browsers' values like for ex. "blue"
Note: "brand names" icons are not animated since v1.1
<i class="livicon" data-name="chrome" data-color="original" data-hovercolor="false"></i>
The result:
<i class="livicon" data-name="chrome" data-color="original" data-hovercolor="blue"></i>
The result:
<i class="livicon" data-name="chrome" data-color="original" data-hovercolor="#23ffbf"></i>
The result:
data-animate or data-a
Define an icon will be animated or static: "true" or "false"
<i class="livicon" data-name="external-link" data-size="16" data-animate="false"></i>
The result:
data-loop or data-l
Define will icon animation be repeated infinity: "true" or "false".
<span class="livicon" data-name="angle-wide-right" data-l="true"></span>
The result:
data-iteration or data-i
Define the number of animation's repeating.
In a LivIcons script every icon has its own animation's repeating, normaly one-three. But if you want you can set this option to any desired value.
<span class="livicon" data-name="sort" data-i="7"></span>
The result:
data-loop attribute has a higher priority than data-iteration. So if "loop", "iteration" will not take effect.
data-duration or data-d
Define the duration of animation (in ms)
In a LivIcons script every icon has its own animation's speed based on my opinion. But if you feel that animation should be slower or faster you can play with this option.
<span class="livicon" data-name="wrench" data-duration="600"></span>
The result: I'm fast!
<span class="livicon" data-name="wrench" data-duration="4000"></span>
The result: I'm slow!
data-eventtype or data-et
Define the event type: "hover" or "click".
<i class="livicon" data-name="users" data-eventtype="click"></i>
The result:
data-onparent or data-op
Define to bind or don't bind the event handler to a parent element containing a LivIcon: "true" or "false".
Here the parent is <button>, the child - .livicon. When hover the button animation of LivIcon is started.
<button class="btn btn-primary"><span class="livicon shadowed" data-n="comment" data-s="24" data-c="white" data-hc="0" data-onparent="true"></span> On button</button>
The result:
From v1.2 there is the ability to work with icons dynamically via three JS methods. These methods are .addLivicon(), updateLivicon() and .removeLivicon(). The first two ones can get options which are equal to data attributes data-... explained above. The last method can get only one option - 'total'.
For two methods options can be passed in two notations: full and short.
Now you even not always need class livicon to draw a desired icon.
data-... attributes.
Example of usage in full notation for ex. .addLivicon():
$('#my_cool_icon').addLivicon({
name : "comment",
size : 32,
color : "original",
hovercolor : "#000",
animate : "true",
loop : false,
iteration : 3,
duration : 700,
eventtype : "hover",
onparent : false
});
Example of usage in short notation for ex. .updateLivicon():
$('#my_cool_icon').updateLivicon({
n : "comments", //you can change the icon itself
s : 48,
c : "blue",
hc : "red",
a : "true",
l : false,
i : 3,
d : 700,
et : "click",
op : false
});
Of course you can write that in one string:
$('#my_cool_icon').addLivicon({ name : "comment", size : 32, color : "original", hovercolor : "#000", animate : "true", loop : false, iteration : 3, duration : 700, eventtype : "hover", onparent : false });
If any of the above parameters are omitted, the script will take values from data attributes and (or) from the default settings.
.removeLivicon() method can work in two ways:
Without an option
$('#my_cool_icon').removeLivicon();
it will delete SVG or VML code from a choosen element (we can say that we clear a canvas).
With option 'total' it removes from the DOM the element itself. In the next example the element #my_cool_icon will be destroyed completely after execution:
$('#my_cool_icon').removeLivicon('total');
For webkit browsers you can define CSS filter "shadow".
Note: works in Chrome 18.0+, Safari 6.0+, iOS Safari 6.0+, Blackberry Browser 10.0+, Chrome for Android 25.0+
For more info: W3C Working Draft
Good article about css filters
Add something like these lines of code to your CSS file:
.livicon.shadowed {
-webkit-filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.25));
filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.25));
}
And add class shadowed to LivIcon:
<span class="livicon shadowed"> ... </span>
The result for ex. on button: Download from CodeCanyon
For spinners the special behaviour is defined.
If not "loop" any spinner will work like any other icon. But if "loop" is set to "true" either via global defaults (what is STRONGLY not recommended!) or via data-loop attribute a spinner icon will be animated permanently with no effect on "hover" or "click" events. Color on "hover" will not change too. In other words a spinner will work as any other traditional one.
Loop is "false":
<span class="livicon" data-name="spinner-two" data-s="24" data-hc="red" data-loop="false"></span>
The result: I'm not looped
Loop is "true":
<span class="livicon" data-name="spinner-three" data-c="red" data-s="32" data-loop="true"></span>
display: none; and display: block; for example in modal windows. Script will periodicaly check if a spinner is hidden. If yes it will stop the spinner's animation and start it again when it become visible. Without that, spinner animation can put a heavy strain on user computer's CPU and browser can work very slow.
Morphs are a special category recomended to use as backgrounds for any desired block. Note: Childs elements need absolute positioning.
Morphs behavior is totaly different from other icons.
They cannot be looped. And their animation don't go from start to end and to start position again. While you "mouseenter" or first "click" any morph icon it go the end state. When you "mouseleave" or make second "click" it returns to the start.
The transition time (in milliseconds) for changing morph states is defined in "morphduration" variable.
Event type is "hover":
<span class="livicon" data-name="morph-t-right-s" data-s="64" data-c="blue" data-hc="green" data-et="hover"></span>
The result:
Event type is "click":
<span class="livicon" data-name="morph-t-right-s" data-s="64" data-c="blue" data-hc="green" data-et="click"></span>
The result:
More examples of usage of Livicons you can find at livicons.com Welcome!
With the customizer included in the package you can simply and fast choose what icons you need for your project and get the compact code.
For your design purpose I've included all LivIcons shapes in vector format AI files. This files are saved in CS2, CS3, CS4, CS5, CS6 formats. The content is the same.
Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions relating to this package. No guarantees, but I'll do my best to assist. If you have a more general question relating to LivIcons, you might contact me via my user page contact form here. And again if you like these animated icons please rate them with . Thanks You!
Best regards,
Dee