CODEWITHSUNDEEP
font-awesomefont-awesome-5
Stupid_designer
Stupid_designer

Reputation: 128

How to use Font Awesome offline?

Font awesome is service provide free/paid icons, and sometime we feel like to use it offline as part of our own project to remove dependency from network resource. but how? sometime we think we followed all steps mentioned in article by them but we miss something. and that why I write this q&A.

Upvotes: 1

Views: 3738

Answers (2)

JustAG33K
JustAG33K

Reputation: 1556

How to use Font Awesome offline? As of writing this answer, the latest version of Font Awesome is 5.15.4

Following the Font Awesome documentation on Hosting Font Awesome Yourself

  • Download the free version of Font Awesome from here
  • Extract the downloaded package
  • Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory.
  • Add a reference to the copied /css/all.css file like the below code into the <head> element of each template or page that you want to use Font Awesome on.

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

  • Now you can start using the font awesome icons locally in your project <i class="fas fa-user"></i>

Upvotes: 3

Stupid_designer
Stupid_designer

Reputation: 128

Follow first their article: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

The /css/all.css file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.

Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).

Add a reference to the copied /css/all.css file into the of each template or page that you want to use Font Awesome on.

After then do this.

@font-face{
  font-family:Font Awesome\ 5 Free;
  font-style:normal;
  font-weight:900;
  src:url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.eot');
  src:url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.eot?#iefix') format("embedded-opentype"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.woff2') format("woff2"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.woff') format("woff"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.ttf') format("truetype"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.svg#fontawesome') format("svg")
}

Upvotes: -1

Related Questions