Font-Awesome css not working locally

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


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

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


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/

  1. FontAwesome.otf
  2. fontawesome-webfont.eot
  3. fontawesome-webfont.svg
  4. fontawesome-webfont.ttf
  5. fontawesome-webfont.woff
  6. fontawesome-webfont.woff2

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

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