Font awesome CSS

To display this little icon

we can use the font awesome css.

It looks extremely simple to use. Here is an example from w3school.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-home"></i>

The problem arises when I copy the css file locally. What I get looks...

It is because the css file alone is not enough to render the image. I also need to save the image files locally.

Where to find the image files? If we hit

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

We need to download

• fontawesome-webfont.eot
• fontawesome-webfont.woff2
• fontawesome-webfont.woff
• fontawesome-webfont.ttf
• fontawesome-webfont.svg  

Replace the css/font-awesome.css with fonts/<image-file-names>, e.g

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot

Then put these image files in the fonts folder at the same level with css folder