Font Awesome Icons in Offline

Solution 1:

Press the "Download free" button and make sure that you have the webfonts too. There is a web-fonts-with-css folder in the downloaded zip. Copy the fonts in your project and modify the paths for the fonts in your CSS to point to the location of the webfonts.

If you open the CSS linked in your questions you'll see that they have some imports with

url('../fonts/fontawesome-webfont.woff2?v=4.7.0')

modify these with the location of the fonts downloaded.

Solution 2:

1. Download the font awesome free zip from the official site
2. there is a folder called 'css', copy that folder into your project folder, (important) and also copy the folder named 'webfonts'
3. then link the desired css file to html file (all.css or fontawesome.css or fontawesome.min.css) using the command
4. then try your code, it will work

Solution 3:

The Fontawesome website itself documents how to download and use the icon kit offline here: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Solution 4:

Here is all around solution for you:

1. Download FontAwesome ZIP file
2. Create an assets folder on your public_html (or your root folder)
3. Extract all the content of font-awesome-4.7.0 into your assets folder
4. Edit your HTML file head tag and add the following code (i.e. after all meta tags):

<link rel="stylesheet" href="./assets/css/font-awesome.min.css">