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

29
votes

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

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

enter image description here My link which is correct.

enter image description here The font-awesome.css file path, i didn't change anything.

enter image description here directory folders and files.

enter image description here inside of font folder.

enter image description here inside css folder.

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

9
htmlcsstwitter-bootstrapfonts

9 Answers

36
votes
  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 !

18
votes

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)

enter image description here

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.

12
votes

Just Downloading Css and linking to the file will not make sense,You should look into the css file....

You havent Downloaded the fonts folder in which all fonts styles are stored... So Download it and give path to the font files located on your system , I have shown the links in boxes which you need to add links in font-awesome css files..

Download fonts from the cdn links and store in fonts folder..

bootstram font awesome

Hope this will work for you..

6
votes

You may find that the developer options in your favorite browser will give you an idea why the file is not working.

Font awesome requires the font files which come with it. The CSS file will reference these and try to include them, but currently won't be able to find them.

Download font-awesome-4.1.0.zip from FontAwesome

Then extract this and put the css and fonts folders into your project. You can then reference the file as:

<link href="css/font-awesome.min.css" rel="stylesheet">
1
votes
  1. Download fontawesome (font-awesome-4.7.0) : http://fontawesome.io/get-started/
  2. Unzip and copy into your project as-is.
  3. In HTML reference font-awesome.min.css e.g: <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
1
votes

this link is so helpful. and work for me.

  1. go to Font Awesome.com and download font awesome for the web.
  2. extract this file.
  3. put the webfonts file from the font awesome (download file) to your project file. (Delete the rest of the folder :) )
  4. make new txt and copy the all.css file to it. (name it font.css and put it to the css folder).
  5. add <link rel="stylesheet" href="css/fonts.css"
1
votes
  1. Go to network console, turn font filter ON
  2. See which files are downloaded in background
  3. Right click and open in new tab.. it will download that file
  4. Put them in root DIR of your server storage

For eg. htdocs/webfonts/fa-solid900.woff2

  1. Final download all.css file and link to your head section

Welcome in advance :)

enter image description here

Search for the required file using developer tools

enter image description here

Download file locally

enter image description here

Also download all.css or whatever cdn you are using

enter image description here

Putting downloaded font files in this webfonts/ folder

0
votes

It is important to ensure relative links to eot & woff files other than css, in case you are using .htaccess

1) extract downloaded zip file to desired directory

in case .htaccess path is

H:\virtualhost\ .htaccess

and fontawesome css and fonts path is

H:\virtualhost\fontawesome-free-5.4.2-web\css

H:\virtualhost\fontawesome-free-5.4.2-web\webfonts

2) Make following entries in .htaccess

RewriteRule ^css/([^/]*).css$ /fontawesome-free-5.4.2-web/css/$1.css [L]

RewriteRule ^webfonts/([^/]*).eot$ /fontawesome-free-5.4.2-web/webfonts/$1.eot [L]

RewriteRule ^webfonts/([^/]*).woff2$ /fontawesome-free-5.4.2-web/webfonts/$1.woff2 [L]

RewriteRule ^webfonts/([^/]*).woff$ /fontawesome-free-5.4.2-web/webfonts/$1.woff [L]

3) Add following in head part of html

http://local-ip-address:port/css/all.css

0
votes

Download "font awesome" for Web from this link https://fontawesome.com/download, extract the folder, and add a reference to the all.css file inside index.html enter image description here