FontAwesome icons with animation

Size
2,083 Kb
Views
10,120

How do I make an fontawesome icons with animation?

Just a thought I had for flat icons with shadow. Visually it turned out just as I wanted it, however it's not written well and should not be used in production.. What is a fontawesome icons with animation? How do you make a fontawesome icons with animation? This script and codes were developed by Georgi Demirev on 11 November 2022, Friday.

FontAwesome icons with animation Previews

FontAwesome icons with animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FontAwesome icons with animation</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <i class="fa fa-heart fa-5x fa-animated"></i> <i class="fa fa-cog fa-5x fa-animated"></i> <i class="fa fa-plug fa-5x fa-animated"></i> <i class="fa fa-umbrella fa-5x fa-animated"></i>
</div> <script src="js/index.js"></script>
</body>
</html>

FontAwesome icons with animation - Script Codes CSS Codes

body { background: #ff6862; color: #ffd0b0; }
.wrapper { width: 400px; margin: 100px auto; text-align: center; }
.fa-animated { position: relative; padding-top: 15px; padding-bottom: 15px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; vertical-align: bottom; margin-left: 20px;
}
.fa-animated:hover { padding-top: 0px; padding-bottom: 30px;
}
.fa-animated::after { content : ""; position: absolute; left: 0%; right: 0%; bottom: 0; height: 0px; width: 100%; border-bottom: 2px solid #d93a36; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 90px;
}
.fa-animated:hover::after { left: 20%; right: 20%; width: 60%; border-bottom: 1px solid #d93a36;
}

FontAwesome icons with animation - Script Codes JS Codes

/* For test purposes only, should NOT be used in production.
Color inspiration from https://goo.gl/TXZDeJ */
FontAwesome icons with animation - Script Codes
FontAwesome icons with animation - Script Codes
Home Page Home
Developer Georgi Demirev
Username nicotinell
Uploaded November 11, 2022
Rating 4.5
Size 2,083 Kb
Views 10,120
Do you need developer help for FontAwesome icons with animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Georgi Demirev (nicotinell) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!