How To Animate Font Awesome Icons In Div Background
How To Animate Font Awesome Icons In Div Background
In this tutorial I volition explain how to use Font Awesome icons in Athwart applications.
Outset nosotros will learn bones Font Crawly icons rendering in Angular and and then nosotros will go through some cool Font Crawly features like animations,layering,transforming etc..
Installing free version Font Crawly icons in Athwart
To install Font Awesome icons in Angular applications use the below npm or yarn commands
npm install @fortawesome/fontawesome-svg-core npm install @fortawesome/free-brands-svg-icons npm install @fortawesome/free-regular-svg-icons npm install @fortawesome/complimentary-solid-svg-icons npm install @fortawesome/angular-fontawesome yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/free-brands-svg-icons yarn add together @fortawesome/free-regular-svg-icons yarn add @fortawesome/free-solid-svg-icons yarn add @fortawesome/angular-fontawesome Installing pro version Font Awesome icons in Angular
To install pro version Font Awesome icons follow the below steps
- Configure npm registry to install icons from Font Awesome npm package.
- If you purchase a license for Font Crawly icons you volition be given an authentication token through which you can set your npm registry.
This configuration can exist done at global level or per project level
Global level configuration
To use Font Crawly icons across all the angular projects add together @fortawesome scope to use Font Awesome pro npm parcel source i.e., npm.fontawesome.com
npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \ npm config fix "//npm.fontawesome.com/:_authToken" TOKEN TOKEN will be given when you buy a professional license.
Project level configuration
To utilise Font Awesome icons in a single project create a .npmrc file at project root level and set the below configuration
@fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=TOKEN Later the configurations install the pro Font Crawly icons past using below npm commands
npm install --save-dev @fortawesome/fontawesome-pro npm install @fortawesome/pro-solid-svg-icons npm install @fortawesome/pro-regular-svg-icons npm install @fortawesome/pro-light-svg-icons To display font awesome icons in normal HTML pages using their class name, CSS content values and for consummate free icon list go through the below commodity.
Font Awesome Icons List
Using Font Awesome icons in Angular applications
We can use Font Awesome icons in Athwart applications two ways depending upon our requirements
- Using Explicitly in Component
- Using Icon library
Steps to use Font Awesome icons at component level
-
In app.module.ts file import FontAwesomeModule from @fortawesome package every bit shown below
import { FontAwesomeModule } from '@fortawesome/athwart-fontawesome' -
And then add FontAwesomeModuel in imports array as shown below
@NgModule({ declarations: [ AppComponent, FontawesomeDemoComponent ], imports: [ BrowserModule, AppRoutingModule, FontAwesomeModule ], providers: [], bootstrap: [AppComponent] }) I take created a component chosen FontAwesomeDemo in my angular awarding to utilize Font Awesome icons
Import the required icons from @fortawesome/costless-solid-svg-icons file as shown below. In this instance I am importing Moving picture Icon.
import { Component, OnInit } from '@athwart/core'; import { faFilm } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-fontawesome-demo', templateUrl: './fontawesome-demo.component.html', styleUrls: ['./fontawesome-demo.component.scss'] }) export class FontawesomeDemoComponent implements OnInit { filmIcon = faFilm; constructor() { } ngOnInit() { } } I take created a variable called coffeeIcon and assign it to the faCoffee imported from free svg icons package.
In the component html render using fa-icon selector show beneath
<fa-icon [icon]="filmIcon"></fa-icon> 
fontawesome film icon
This approach is skilful when you lot are using Font Awesome icons in a single component. But most of the times this is not the case We will be using icons beyond the applications.
So each time importing icons in private components is not a good idea.
That'due south where Icon library very useful.
We can import all necessary icons in 1 place and use them across the application. Go through the beneath example
Using Font Awesome Icon library
To use Font Awesome icons across the application follow the beneath steps.
- In app.module.ts file Import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
- Adjacent add together FontAwesomeModule to imports assortment equally shown higher up.
- To use the icon library Import { library } from '@fortawesome/fontawesome-svg-core'
- Import required icons for instance { faFilm } from '@fortawesome/free-solid-svg-icons'
- And finally Add together them the library with library.add(faFilm)
- Ideally we volition be using more than i icon, so to add together multiple icons just pass them to library.add method as comma separated values.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { library } from '@fortawesome/fontawesome-svg-core'; import { faFilm } from '@fortawesome/free-solid-svg-icons'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FontAwesomeModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { constructor() { library.add(faFilm); } } To add the multiple icons to Font Crawly library use the following code snippet.
import { faFilm } from '@fortawesome/free-solid-svg-icons'; import { faFish } from '@fortawesome/free-solid-svg-icons'; //Adding to the library library.add(faFilm,faFish); After setting up library icons now nosotros can apply icons directly in our component file using their proper name as shown beneath
<fa-icon icon="film"></fa-icon> The default icon way in Font Crawly is 'fas' i.e., font awesome solid style.
If you desire to modify the icon way we can pass the manner to icon attribute as shown beneath. (You need to import corresponding icon style)
<fa-icon [icon]="['far', 'film']"></fa-icon> far ways font crawly regular styles.
As the icons are non managed past component file, if y'all remove the icons from library at app module level the components which are using those icons will pause.
If you want to utilize all bachelor icons, Y'all can add them to library as shown below
import { library } from '@fortawesome/fontawesome-svg-core'; import { fas } from '@fortawesome/costless-solid-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons'; library.add(fas, far); Here I am adding bothe regular and solid styles to the library. Now we can employ all free icons inside our project.
The just disadvantage of this approach is athwart project packet size will increase.
So information technology is improve to add together necessary icons to the library instead of adding all icons.
Available icon styles in Font Crawly
In that location are four unlike types of icon styles available in Font Awesome
- regular icons (imported from @fortawesome/gratuitous-solid-svg-icons)
- solid icons (imported from @fortawesome/free-regular-svg-icons)
- make icons (imported from @fortawesome/free-brands-svg-icons)
- pro light icons (imported from @fortawesome/pro-lite-svg-icons)
To apply regular icons use the prefix 'far'
<fa-icon [icon]="['far', 'bell']"></fa-icon> To use solid icons utilise the prefix 'fas'
<fa-icon [icon]="['fas', 'bell']"></fa-icon> To employ make icons such equally twitter,facebook etc utilize the prefix 'fab'
<fa-icon [icon]="['fab', 'angular']"></fa-icon> <fa-icon [icon]="['fab', 'twitter']"></fa-icon> <fa-icon [icon]="['fab', 'facebook']"></fa-icon> 
fontawesome brand icons
To use the pro only light icons employ the prefix 'fal'
<fa-icon [icon]="['fal', 'calendar']"></fa-icon> In some cases we might need to add together aforementioned icon from different kinds of styles.
To utilize aforementioned icon from multiple styles, we have to import icons using allonym names as shown below.
import { faBell as farBell } from '@fortawesome/free-regular-svg-icons'; import { faBell equally fasBell } from '@fortawesome/gratis-solid-svg-icons'; library.add(farBell, fasBell); At present we tin can use bell icon in our component file as shown below
<fa-icon [icon]="['fas', 'bell']"></fa-icon> <fa-icon [icon]="['far', 'bong']"></fa-icon> 
Regular vs solid icons
Changing Font Awesome Icons color and stroke in Angular
To change the Font Awesome Icons color and stroke nosotros can utilize style attribute of fa-icon selector as shown beneath
<fa-icon [icon]="['fas', 'film']" [styles]="{'stroke': 'ruby-red', 'color': 'red'}"></fa-icon> Changing default icon style in Font Awesome Angular
To change the default icon style in Font Awesome we accept to inject FaIconService and change the defaultPrefix property as shown below
The default icon manner in Font Awesome is fas
import { FaIconService } from '@fortawesome/athwart-fontawesome'; consign class AppComponent { constructor(private faIconService: FaIconService) { this.faIconService.defaultPrefix = 'far'; } } Font Crawly icons features
Athwart Font Crawly icons comes upwardly with useful features like
- Changing icons size
- Fixed width icons
- Rotating icons
- Mirroring icons
- Animating icons
- Adding border to the icons
- Pulled icons
- Changing default styles of icons like color and stroke
Changing size of Font Awesome icons in Angular
We can change the size of Font Awesome icons in Angular using size property of fa-icon selector.
Normally Font Awesome icons inherit the size of parent container. By using size belongings we tin can relatively increment or decrease the size of icons with respect to the inherited font-size.
<div style="font-size:15px;color:red"> <fa-icon [icon]="['fab', 'angular']"></fa-icon> <fa-icon [icon]="['fab', 'angular']" size="xs"></fa-icon> <fa-icon [icon]="['fab', 'angular']" size="sm"></fa-icon> <fa-icon [icon]="['fab', 'angular']" size="lg"></fa-icon> <fa-icon [icon]="['fab', 'athwart']" size="2x"></fa-icon> <fa-icon [icon]="['fab', 'angular']" size="3x"></fa-icon> <fa-icon [icon]="['fab', 'angular']" size="5x"></fa-icon> <fa-icon [icon]="['fab', 'angular']" size="6x"></fa-icon> <fa-icon [icon]="['fab', 'angular']" size="7x"></fa-icon> <fa-icon [icon]="['fab', 'angular']" size="10x"></fa-icon> </div> 
fontawesome icon different sizes
Fixed width Font Awesome icons in Angular
Font Crawly icons contains more than than 1500+ free icons and 3500+ pro icons. But all the icons are non of aforementioned size.
To force the icons to render in a stock-still size nosotros can use fixedWidth property of <fa-icon>
This fixedWidth belongings is very useful when we want vertically align a series of icons in a listing or navigation menu.
To understand it further I have added android,apple brand icons which are of different width and rendered them normally and with fixedWidth.
I accept added background colour to Font Awesome icons for visual indication of icons width.
<div mode="font-size:5em"> <fa-icon course="normal" [icon]="['fab', 'android']"></fa-icon> <br/> <fa-icon grade="normal" [icon]="['fab', 'apple']"></fa-icon> <br/> <fa-icon class="fixed" [icon]="['fab', 'android']" [fixedWidth]="true"></fa-icon> <br/> <fa-icon class="fixed" [icon]="['fab', 'apple']" [fixedWidth]="true"></fa-icon> </div> //Adding background color to encounter the width of the icons .normal{ groundwork-color: red; colour:white; } .fixed{ background-color: red; colour:white; } 
fixed width fontawesome icons
Equally you tin can encounter, the icons rendered with fixedWidth are vertically aligned with same width
Oft in our projects we might need to rotate,flip or mirror an icon depending upon the project pattern.
Font Awesome angular comes up with handy utilities to aid us in such scenarios.
Rotating Font Crawly icons in Angular
Nosotros tin can rotate the Font Awesome icons in Athwart using rotate belongings of <fa-icon>
<fa-icon [icon]="['fas', 'snowboarding']"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" rotate="90"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" rotate="180"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" rotate="270"></fa-icon> 
Rotating fontawesome icons
Mirroring Font Awesome icons in Angular
We can mirror the Font Crawly icons using flip property every bit shown below
Allowed values for flip property are
- horizontal : mirrors icon horizontally
- vertical : mirrors icon vertically
- both : mirrors icon vertically and horizontally (requires 5.7.0 or greater)
<h3>horizontal</h3> <fa-icon [icon]="['fas', 'snowboarding']"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" flip="horizontal"> </fa-icon><br/> <h3>Vertically</h3> <fa-icon [icon]="['fas', 'snowboarding']"></fa-icon><br/> <fa-icon [icon]="['fas', 'snowboarding']" flip="vertical"> </fa-icon><br/> <h3>Both Vertical and horizontal</h3> <fa-icon [icon]="['fas', 'snowboarding']" flip="both"></fa-icon> 
Mirroring fontawesome icons
Animative Font Crawly icons in Angular
I of the beautiful features of Font Crawly icons is the ability to add blitheness to the icons.
This characteristic very useful when we desire to add loading or status communicating symbols.
In Font Crawly Angular we tin can apply spin and pulse to animate the icons.
Have a look at the rotating fan icon
<fa-icon [icon]="['fas', 'fan']" [spin]="true"></fa-icon> <fa-icon [icon]="['fas', 'fan']" [pulse]="truthful"></fa-icon> And spinner and sync icons are usually used along with animations.
<fa-icon [icon]="['fas', 'spinner']" [spin]="true"></fa-icon> <fa-icon [icon]="['fas', 'spinner']" [pulse]="true"></fa-icon> <fa-icon [icon]="['fas', 'sync']" [spin]="true"></fa-icon> <fa-icon [icon]="['fas', 'sync']" [pulse]="true"></fa-icon> The existent fun is nosotros can bind the spin and pulse values to athwart component variables. As shown below
I have created a variable chosen isAnimated and binding it to the fa-icon spin property. On clicking the icon Iam toggling the isAnimated value
<fa-icon size="5x" [icon]="['fas', 'volleyball-ball']" [spin]="isAnimated" (click)="isAnimated=!isAnimated"> </fa-icon> <fa-icon size="5x" [icon]="['fas', 'walking']" [spin]="isAnimated" (click)="isAnimated=!isAnimated"> </fa-icon> <fa-icon size="5x" [icon]="['fas', 'biking']" [spin]="isAnimated" (click)="isAnimated=!isAnimated"> </fa-icon> <fa-icon size="5x" [icon]="['fas', 'automobile-crash']" [spin]="isAnimated" (click)="isAnimated=!isAnimated"> </fa-icon> <fa-icon size="5x" [icon]="['fas', 'fighter-jet']" [spin]="isAnimated" (click)="isAnimated=!isAnimated"> </fa-icon> Pulled Font Awesome Icons
Usually notes and tips are wrapped around the single quotes or double quotes to requite us some visual stardom.
Nosotros can use pull property of Font Awesome angular to wrap text around icons.
<fa-icon [icon]="['fas', 'quote-left']" pull="left"></fa-icon> If You Are Working On Something That Yous Really Care About, You lot Don't Take To Exist Pushed. The Vision Pulls You <fa-icon [icon]="['fas', 'quote-right']" pull="right"></fa-icon> The allowed values of pull are left,right.
fontawesome pulled icons
Transform Font Awesome icons in Angular
we can scale,position,flip and rotate icons using transform aspect of Font Crawly selector in Athwart.
And farther we can combine them for some beautiful effects.
To calibration Font Awesome icons using transform attribute employ shrink-x or grow-x. Where ten is any numeric value including decimals.
<fa-icon [icon]="['fas', 'snowboarding']"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="shrink-5"> </fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="abound-5"> </fa-icon> 
scaling fontawesome icons
To position the icons i.due east., to move icons up, downward, left, or correct, use upwardly-x, down-10, left-x, and right-x where 10 whatsoever numeric value, including decimals.
<fa-icon [icon]="['fas', 'snowboarding']"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="up-5"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="left-5"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="down-5"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="correct-5"></fa-icon> 
fontawesome position icons
Now nosotros will combine both position and scaling every bit shown beneath.
<fa-icon [icon]="['fas', 'snowboarding']"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="shrink-10 up-5"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="compress-10 downward-5"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="shrink-10 left-5"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="shrink-x right-v"></fa-icon> 
positioning fontawesome icons
To rotate the icons using Font Crawly transform holding utilize rotate-10. Where x is degrees to rotate and negative values also immune.
<fa-icon [icon]="['fas', 'snowboarding']"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="rotate-90"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="rotate--xc"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="rotate-180"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="rotate-270"></fa-icon> 
fontawesome icons transform rotate
Nosotros tin can bind rotate values to our component variables to create animatation effect. Have a look at the below jumping horse animation.
<fa-icon size="5x" [icon]="['fas', 'horse']" transform="rotate-{{rotation}}"> </fa-icon> <br/> <input blazon='range' min="-15" max="0" [value]="rotation" (input)="rotation=$result.target.value"/> I have created a range input with minimum value equally -fifteen and maximum value as 0. And bound it to rotation value of horse icon.
The horse icon volition bound from -15 to 0 bending whenever we modify the range.
To mirror or flip the icons we tin can employ flip-h (horizontal) or flip-v (vertical) or nosotros can use both flip-h flip-v to flip both horizontally and vertically.
<fa-icon [icon]="['fas', 'snowboarding']"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="flip-h"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="flip-v"></fa-icon> <fa-icon [icon]="['fas', 'snowboarding']" transform="flip-5 flip-h"></fa-icon> 
transform fontawesome icons flipping
Nosotros tin can use all of them in one tranform as shown beneath
<fa-icon [icon]="['fas', 'snowboarding']" transform="flip-h rotate-ninety compress-10 upwards-5"></fa-icon> 
Transform fontawesome icons
Combine two icons using Font Awesome mask
Nosotros tin combine ii icons into one single color icons using mask belongings for fa-icon as shown below
<fa-icon [icon]="['fas', 'headphones']" transform="shrink-6" [mask]="['fas', 'square']"></fa-icon> <fa-icon [icon]="['fas', 'pencil-alt']" transform="shrink-6" [mask]="['fas', 'annotate']"></fa-icon> mask icon i.due east., outer icon acts like background to the actual icon as shown below. transform property volition be practical on actual icon.
In the above example headphones and pencil-alt are actual icons. Whereas square and annotate icons acts similar background.
masking fontawesome icons
Layering, Text, & Counters Font Awesome icons
Font Crawly layers accept some cool features like
- we can identify multiple icons on summit of each other.
- We can add text on top of icons.
- We can add counters to the icons.
Angular Font Awesome has a selector called fa-layers which is used to identify icons on superlative of each other.
We will endeavour to place twitter icon on tiptop of foursquare icon. To achieve this use the below lawmaking snippet
<fa-layers> <fa-icon [icon]="['fas', 'square']"></fa-icon> <fa-icon [icon]="['fab', 'twitter']"></fa-icon> </fa-layers> The to a higher place code first renders square icon (layer one) on meridian of that it volition add together i more layer with twitter icon.
But if y'all see the output you won't see anything other than square icon because both icon layers are of same colour.
So if you give another color to the twitter icons information technology will exist visible
<fa-layers> <fa-icon [icon]="['fas', 'square']"></fa-icon> <fa-icon [icon]="['fab', 'twitter']" style="color:xanthous"></fa-icon> </fa-layers> Or instead of giving colour yous tin use inverse attribute to create knock-out looking effect.
<fa-layers> <fa-icon [icon]="['fas', 'square']"></fa-icon> <fa-icon [inverse]="true" [icon]="['fab', 'twitter']" ></fa-icon> </fa-layers> Farther we can apply transform to shrink and position the twitter icon exactly middle of square icon.
<fa-layers> <fa-icon [icon]="['fas', 'square']"></fa-icon> <fa-icon [inverse]="true" [icon]="['fab', 'twitter']" transform="correct-1 compress-5"></fa-icon> </fa-layers> 
fontawesome icons layers
Now we volition come across how to combine more than 2 icons into one icon using Font Awesome layers
<fa-layers> <fa-icon [icon]="['fas', 'play']" transform="rotate--90 abound-2"></fa-icon> <fa-icon [inverse]="true" [icon]="['fas', 'sun']" transform="shrink-x upwardly-2"></fa-icon> <fa-icon [inverse]="truthful" [icon]="['fas', 'moon']" transform="shrink-eleven down-four.ii left-four"></fa-icon> <fa-icon [changed]="truthful" [icon]="['fas', 'star']" transform="shrink-11 downward-iv.two right-four"></fa-icon> </fa-layers> I am placing sun,moon,star on top of rotated play icon (i.eastward., triangle). I accept used transform property to marshal them properly equally shown below
fontawesome multiple icons
Placing multiple icons on top of each other has several real world use cases.
For example banning cellphones and photographic camera symbols icons.
<fa-layers> <fa-icon [icon]="['fas', 'camera']" transform="shrink-7"></fa-icon> <fa-icon [icon]="['fas', 'ban']" mode="color:red"></fa-icon> </fa-layers> <br/> <fa-layers> <fa-icon [icon]="['fas', 'mobile-alt']" transform="shrink-7"></fa-icon> <fa-icon [icon]="['fas', 'ban']" fashion="color:carmine"></fa-icon> </fa-layers> 
fontawesome ban icons
Adding text to Font Awesome icons in Angular
To add text to the icon nosotros can employ fa-layers-text selector inside fa-layer equally shown beneath
Hither we are adding appointment to the calendar icons using fa-layer-text.
<fa-layers> <fa-icon [icon]="['fas', 'calendar']"></fa-icon> <fa-layers-text content="16" style="color: white;font-weight: bold" transform="shrink-5 down-three"></fa-layers-text> </fa-layers> 
fontawesome icons layer text
Adding counters to Font Awesome icons in Athwart
To add counters to Font Awesome icons in Angular nosotros can use fa-layers-counter along with fa-layer.
This feature very useful while showing notification counters or email counters.
<fa-layers size="5x"> <fa-icon [icon]="['fas', 'envelope']"></fa-icon> <fa-layers-counter content="100+"></fa-layers-counter> </fa-layers> <fa-layers size="5x"> <fa-icon [icon]="['fas', 'bell']"></fa-icon> <fa-layers-counter content=""></fa-layers-counter> </fa-layers> 
fontawesome icons layer counter
DOWNLOAD HERE
How To Animate Font Awesome Icons In Div Background
Posted by: okaneocceslight.blogspot.com
0 Response to "How To Animate Font Awesome Icons In Div Background"
Post a Comment