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

Related Post(s)

» How to create Custom Social Media Share Buttons Using JavaScript

» How to create a Dynamic GO BACK button on a 404 Error Page

» How to create a Digital Clock using JavaScript

» Learn how to Switch Between Dark and Light Mode With CSS and Javascript

» Learn how to animate the value of the placeholder attribute with JAVASCRIPT

collections_bookmark Category :: Javascript
date_range Published :: 1 year ago At: 09:20 AM
event_note Detailed Date :: Jan 07th, 2019
person Writer :: Code

YOU MAY LIKE THESE POSTS

share