AllTechnoTricks

Best CSS Animations Of Font Awesome Icons Using CDN To Grab Visitor Attention.

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Twitter Bootstrap and later was incorporated into the BootstrapCDN. Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it second place after Google Fonts.

The use of font awesome icons in web design is a proven method to modernize a website and help direct user flow. Adding icons to your site’s content helps a user better process the information you’re trying to convey and provides a visual focal point that grounds a user to a specific section.

Graphical icons can be used in any number of ways to spice up your web design project. You can use them as visual accompaniments to text areas or as standalone links in situations where space is tight and text blocks aren’t feasible within the design. It’s this versatility to icons which makes them both so useful and widespread.

Fortunately, there’s no need to go about producing your own icon set. Font Awesome provides a versatile framework that incorporates nearly any icon graphic you can imagine along with needed scalability and customization capabilities. Font Awesome will almost assuredly save you time and money in your application of specific icons. The following article will walk through incorporating Font Awesome icons to optimize your web design project.


What is Font Awesome CDN?

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

The most important benefits of using a CDN are

  • Improving website loading times.
  • Reducing bandwidth costs.
  • Increasing content availability and redundancy.
  • Improving website security.


Adding Font Awesome CDN to our Website.

To begin, you first want to ensure the following Font Awesome resources are included on your site. No downloading or complicated scripts are needed--just one reference of the Font Awesome CSS will get you started.

To use font awesome icons in our website, add the following font awesome CDN code in between the style tags of HTML page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

After you get up and running, you can place Font Awesome icons just about anywhere with the < i > tag.


Basic Font awesome Icons

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the < i > tag for brevity, but using a span is more semantically correct).

<i class="fa fa-camera-retro"></i> fa-camera-retro

Larger Font Awesome Icons.

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x,fa-3x,fa-4x, or fa-5xclasses.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x


Fixed Width Icons.

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists and list groups.

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>Settings</a>
</div>


Animated Font Awesome Icons.

Here is the list of best font awesome css animations listed below. Click on the label to extend and copy the css code and use in your website.

@keyframes wrench {
0% {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
8% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
10% {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
18% {
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
20% {
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
28% {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
30% {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
38% {
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
40% {
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
48% {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
50% {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
58% {
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
60% {
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
68% {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
75%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

@keyframes ring {
0% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
2% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
4% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg);
}
6% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
}
8% {
-webkit-transform: rotate(-22deg);
transform: rotate(-22deg);
}
10% {
-webkit-transform: rotate(22deg);
transform: rotate(22deg);
}
12% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg);
}
14% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
}
16% {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
18% {
-webkit-transform:rotate(12deg);
transform: rotate(12deg);
}
20%,100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

@keyframes vertical {
0% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
4% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
8% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
12% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
16% {
-webkit-transform: translate(0,-3px);
transform: translate(0,-3px);
}
20% {
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}
22%, 100% {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
}



@keyframes horizontal {
0% {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
6% {
-webkit-transform: translate(5px,0);
transform: translate(5px,0);
}
12% {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
18% {
-webkit-transform: translate(5px,0);
transform: translate(5px,0);
}
24% {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
30% {
-webkit-transform: translate(5px,0);
transform: translate(5px,0);
}
36%, 100% {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
}

@-webkit-keyframes flash {
0%, 100%, 50% {
opacity: 1;
}
25%, 75%{
opacity: 0;
}
}
@keyframes flash {
0%, 100%, 50% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}

@keyframes bounce {
0%, 10%, 20%, 50%, 80%, 100% {
-webkit-transform:translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform:translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}

@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}

@keyframes float {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

@keyframes pulse {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

@keyframes tada {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(.9) rotate(-8deg);
transform: scale(.9) rotate(-8deg);
}
30%, 50%, 70% {
-webkit-transform: scale(1.3) rotate(8deg);
transform: scale(1.3) rotate(8deg);
}
40%, 60% {
-webkit-transform: scale(1.3) rotate(-8deg);
transform: scale(1.3) rotate(-8deg);
}
80%, 100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}



@keyframes passing {
0% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
50% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
}

@keyframes passing-reverse {
0% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
50% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
}

@keyframes burst {
0% {
opacity: .6;
}
50% {
-webkit-transform:scale(1.8);
transform: scale(1.8);
opacity: 0;
}
100% {
opacity: 0;
}
}

@keyframes falling {
0% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
}
50% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: translateY(50%);
transform: translateY(50%);
opacity: 0;
}
}

@keyframes tinUpOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(-900%);
transform: scale(1, 1) translateY(-900%);
}
}

@keyframes tinUpIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(-900%);
transform: scale(1, 1) translateY(-900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
}

@keyframes tinRightOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(900%);
transform: scale(1, 1) translateX(900%);
}
}



@keyframes tinRightIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(900%);
transform: scale(1, 1) translateX(900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
}

@keyframes openUpRightOut {
0% {
opacity: 1;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}

@keyframes perspectiveDownReturn {
0% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(-180deg);
transform: perspective(800px) rotateX(-180deg);
}
100% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
}

@keyframes spaceOutUp {
0% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(.2) translate(0%, -200%);
transform: scale(.2) translate(0%, -200%);
}
}

@keyframes puffIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
-webkit-filter: blur(2px);
filter: blur(2px);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-filter: blur(0px);
filter: blur(0px);
}
}

@keyframes vanishIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
-webkit-filter: blur(90px);
filter: blur(90px);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-filter: blur(0px);
filter: blur(0px);
}
}




Earn 10$ To 99$ Per Hour by Typing Online With No Investment.

Megatypers Online Typing Job To Work From Home.

Qlinkgroup Online Typing Job With Zero Registration Fee.