FontAwesome icons with animation

Developer
Georgi Demirev
Size
2,083 Kb
Views
10,120
  1. FontAwesome icons with animation Previews
  2. FontAwesome icons with animation HTML Codes
  3. FontAwesome icons with animation CSS Codes
  4. FontAwesome icons with animation JS Codes

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
IQ Test

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
Name
Custom ordered list with FontAwesom
Facebook Chat Plugin
BetterNav
Responsive Team Member Cards
Full screen blurred background with caption
Layers effect with Stellar.js
Carousel with animation
A Pen by Georgi Demirev
How margins work
Create amazing captions 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!