There are many ways we can use font awesome in different types of applications.
In Regular web applications, a CDN link is used.
In Nodejs Applications, Either use npm fontawesome packages
or a local copy of icons.
CDN link
using cdn always has advantages for smaller files, It is simple to include in web HTML pages
In html pages, Add the below all.min.css file in link tag inside head tag
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>
How to install fontawesome with npm pm
In nodejs applications, font awesome provides packages with npm
or yarn
package managers.
To install in your applications.
npm install --save @fortawesome/fontawesome-free
yarn add --save @fortawesome/fontawesome-free
Install a paid or pro library with the below command
npm install --save @fortawesome/fontawesome-pro
yarn add --save @fortawesome/fontawesome-pro
How to install fontawesome with bower package manager?
Bower is another package manager for javascript applications.
Type run below command
bower install components-font-awesome --save
Another way, add components-font-awesome with the version in bower.json
{
"name": "myapp",
"version": "1.0.0",
"dependencies": {
"components-font-awesome": "^6.0.0"
}
}
Now, In the command line, run the bower install
command to install
bower install
Once the library is installed, you will see files and folders in the bower_components
folder
Download icons into a local folder
You can download the icon zip file from here Extract the content into your project folder, for example, the assets folder
In the HTML page, configure the path of the CSS file as seen below.
<link rel="stylesheet" href="assets/font-awesome/5.15.2/css/all.min.css"/>
all.min.css
contains all free icon styles.
<div class="is-centered">
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>
</div>
*/}}