How to include local file of font awesome 4.1 without using CDN?

Question

This is the effect with font awesome, i only can get it when i using font awesome 4.1 CDN)

Using downloaded files, I included the fonts folder and font-awesome.css, but still no icon appear.

My link which is correct.

The font-awesome.css file path, i didn't change anything.

directory folders and files.

inside of font folder.

inside css folder.

********************************************************
I still didnt manage to get the icon show up, why??

Answer 1

1. Download the fontawesome package from their website.
2. Extract the package where you will find the fontawesome.css file.
3. Copy this file to your css directory
4. copy all the fonts files from the extracted fontawesome package to your fonts folder.
5. Finally add the fontawesome.css to your html page by giving respective location of the css file.

AND Voila !

Answer 2

Since I am using FontAwesome V5.3.1, I would like to update this answer since the folder structure was changed a bit in this version.

1. First, download the FontAwesome v5.3.1 and extract the folder.
2. Copy the all.min.css file from the CSS folder and add it in your stylesheets.
3. Now, Copy the webfonts folder from FontAwesome extract and place it into your project one directory above to your all.min.css file. (Refer the image below)

Since all.min.css file refers to the webfonts folder now, we need to add this file along with the webfonts folder.

src: url("../webfonts/fa-brands-400.eot"); // This is how it is been referred now in all.min.css file. 

Thank you.