How to embed an icon in your webdesign ?

Step 1 : Download an icon

Download an icon .json on Moveicon.
Icon exemple : icon.json.zip

Step 2 : Download the scripts to display the icons.

To display the icons in an html page, you have to download the player "lotties.js" script.
Uncompress the lottie.zip and put the script "lottie.js" at the root of your site or in a scripts folder.
For the exemple, we have make a folder "scripts".
Download script here : lottie.js.zip

Step 3 : Create a balise div in html page

Copy and paste the code in the < body >.


< div id="animIcon" >< /div >
< script src="scripts/lottie.js" >< /script >
< script src="scripts/script.js" >< /script >

Step 4 : Create a script.js

Create a script.js file at the root of your site or in a scripts folder.


var animation = bodymovin.loadAnimation({
 /* Change the name of the container ('animIcon')*/   
 container: document.getElementById('animIcon'),
 rederer:'svg',
 loop: true,
 autoplay: true,
/* put the name of the animated icon */
 path:'name-icon.json'
})
 

Step 5 : Create a style.css

Create your style.css. for your webdesign.


#animIcon{
	width: 30%;
	margin: auto;
	padding: auto;
}
 

Exemple : Download exemple

Download Exemple here : Download the example