Font-Awesome css not working locally

I would like to use Font Awesome locally without using the cdn.

My code fails to add font awesome icons to my page.

I can make it work easily using the cdn link but the local link fails to do anything.

Thanks

Jason.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>How it Works | Rubberdesk </title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Font-Awesome CSS -->
    <link href="/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">

What you have to do when you use bootstrap/font-awesome files locally is:

Path stored must be clear.
Path written inside the font-awesome.min.css should equal to (1)
Version must have the same.
the fonts in folder fonts/ are indeed related to font-awesome.min.css you've got right now.
you must know how to write it on your script, as in; <span class="fa fa-home"></span>, etc.

Writing this may be helpful for someone like me :

Actual folder of font-awesome.min.css is public/css/font-awesome.min.css

In font-awesome.min.css file font-family source refers to URL *'../fonts/fontawesome-webfont.eot'. So following files must be located in public/fonts/

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2

Check the path is right and placed in right folder

try this code

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>How it Works | Rubberdesk </title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font-Awesome CSS -->
    <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">

check path
check path in bootstrap.min.css are all same

It will look same as in question try this

You need to link to the all.css file or the all.min.css file for font-awesome to work locally on your pc and make sure you copy the webfonts folder to the font-awesome folder.

Here is an update for version 5.8.1. As mentioned above you need to download the font files locally in order to run font Awesome locally.

The folder to use is now called /webfonts

Download these files locally and put them in a folder called /webfonts.
Example: (https://use.fontawesome.com/releases/v5.8.1/webfonts/fa-brands-400.eot)

The css is referencing the following URL's.

../webfonts/fa-brands-400.eot
../webfonts/fa-brands-400.woff2
../webfonts/fa-brands-400.woff
../webfonts/fa-brands-400.ttf
../webfonts/fa-brands-400.svg
../webfonts/fa-regular-400.eot
../webfonts/fa-regular-400.woff2
../webfonts/fa-regular-400.woff
../webfonts/fa-regular-400.ttf
../webfonts/fa-regular-400.svg
../webfonts/fa-solid-900.eot
../webfonts/fa-solid-900.woff2
../webfonts/fa-solid-900.woff
../webfonts/fa-solid-900.ttf
../webfonts/fa-solid-900.svg

Total size is around 2.5 MB for all the font files.

use all.css ,not fontawesome-min.css.

ref to : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Thanks for all of your help everyone.

It looks like it was an "fa fa-icon" class issue. I thought I had them in there but they must have been lost during editing - probably due to poor version control.

I think I've been using some 3.x.x code by mistake.

Interesting that everything still worked using the cdn code.

Thanks again. Should be able to fix everything now.

Jason.

Al3x

I had the same issue on Mac OS. My solution was to