How to animate Font awesome icons

Animate Font Awesome Icons with JavaScript

Font Awesome icons are one of the most popular icon libraries used in web development. They are lightweight, scalable, and easy to customize using CSS. Many websites use them for menus, buttons, notifications, and status indicators.

In this tutorial, you will learn how to animate a Font Awesome icon using JavaScript. We will create a simple battery charging animation that cycles from empty to full. This technique is useful for creating loading indicators, status icons, and other visual effects on a website.

This guide is beginner-friendly and works with simple HTML, CSS, and JavaScript.

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
<!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>

The code above:

  • Loads the Font Awesome icon library
  • Displays several static battery icons
  • Creates a container with the ID battery where the animated icon will appear
  • Uses CSS to increase the icon size

Javascript
function BatteryCharge(){
let charging = document.getElementById(‘battery’);
charging.innerHTML = ‘&#xf244’;
setTimeout(function(){
charging.innerHTML = ‘&#xf243’;
},1000);
setTimeout(function(){
charging.innerHTML = ‘&#xf242’;
},2000);
setTimeout(function(){
charging.innerHTML = ‘&#xf241’;
},3000);
setTimeout(function(){
charging.innerHTML = ‘&#xf240’;
},4000);
}
BatteryCharge();
setInterval(BatteryCharge, 5000);
Final Result

The animation will cycle through these battery states:

Empty → Quarter → Half → Three Quarters → Full

After reaching full charge, the animation starts again.

This creates a smooth charging effect that can be used in dashboards, web apps, and status displays.

Conclusion

Animating Font Awesome icons with JavaScript is a simple technique that can make your website feel more dynamic and interactive.

By combining HTML, CSS, and JavaScript, you can create useful visual indicators such as battery status, loading animations, and progress indicators.

Try modifying the timing or replacing the battery icons with other Font Awesome icons to create your own custom animations.

Hope you loved the tutorial.

account_box Author:

date_range Date: 5th, February 2026

access_time Time: 8:53 pm

remove_red_eye Views: 12 Views

Advertisement

share