How to Animate Font Awesome Icons With Javascript

Lord have mercy on Lebanon. If you have anyone in Lebanon check on them. Pray for Lebanon

How to Animate Font Awesome Icons With Javascript

In this video we will create some animated font-awesome effects using vanilla JavaScript setTimeout and setInterval function. This is a simple project but I thought it would be a cool one to share. I really like creating things with plain JS and hope this tutorial gets you started in simple web animations.

Absorbing this amount of content would be a lot if you're just reading it, so i have put together a very simple video with all the tips in an easy to watch and easy to cunsume steps.

Easy Tutorial

Below are the lesson codes.

Html - MarkUp

copy

               
<!DOCTYPE html>
<html>
<head>
 <title>Page Title</title>
 <link rel="stylesheet" href="path-to-font-awesome-file">
 <style>
 #battery{
 font-size:50px;
 }
 </style>
 </head>
 <body>

<div id="battery1" class="fa fa-battery-empty" ></div>
<div id="battery1" class="fa fa-battery-quarter" ></div>
<div id="battery1" class="fa fa-battery-half" ></div>
<div id="battery1" class="fa fa-battery-three-quarter" ></div>
<div id="battery1" class="fa fa-battery-full" ></div>


<h5> Animated Icon </h5>

<div id="battery" class="fa" ></div>

</body>
</html>

Javascript

The charging.innerHTML = '...it takes in the icon unicodes...' .Watch the tutorial.The icon unicodes failed to render in the browser as you can see in the javascript code below.

copy

            
      function BatteryCharge(){
        let charging = document.getElementById('battery');
                
               charging.innerHTML = '';
               
               setTimeout(function(){
               charging.innerHTML = '';
               },1000);
               
               
               setTimeout(function(){
               charging.innerHTML = '';
               },2000);
               
               
              setTimeout(function(){
               charging.innerHTML = '';
               },3000);
               
              setTimeout(function(){
               charging.innerHTML = '';
               },4000);
            }
            
            BatteryCharge();
            
            setInterval(BatteryCharge, 5000);

It's the same logic that i used on this page News API to switch icons every second that passes by.

Hope you loved the tutorial