Font Awesome Icons in Offline

Font Awesome Icons in Offline

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.

Font Awesome not working in offline mode

You also need to download the fonts themselves as well...It is a font, like any other...So, go to fontawesome website, follow the instructions and download css + fonts :)

Unable to work with font-awesome offline, fonts are not been shown

• Add .woff and .woff2 to MIME types in your web hosting,

• or you can try this in startup:

app.UseStaticFiles(new StaticFileOptions { ServeUnknownFileTypes = true });

• or you can specify the file extension to be served as below:

public void Configure(IApplicationBuilder app)
{
    // Set up custom content types - associating file extension to MIME type
    var provider = new FileExtensionContentTypeProvider();

    // Add new mappings
    provider.Mappings[".woff"] = "font/woff";
    provider.Mappings[".woff2"] = "font/woff2";

    app.UseStaticFiles(new StaticFileOptions
    {
        ContentTypeProvider = provider
    });
}

references:

• FileExtensionContentTypeProvider

• Common MIME types

---

Another possible issue could be the path problem. I've downloaded the package and extracted it under wwwroot folder, then renamed it to fontawesome just for easy access.

Then added the all.css file as below:

<link href="~/fontawesome/css/all.css" rel="stylesheet">

and everything worked fine. Notice that you have a different folder structure under your wwwwroot!

Angular 6 service worker is caching font-awesome icons, can't retrieve them in offline mode

You need to allow all the urls which start with fontawesome-webfont as shown in code below.

Add this to your ngsw-config.json file

    {
  "name": "assets",
  "installMode": "prefetch",
  "updateMode": "prefetch",
  "resources": {
    "files": [
      "/assets/**",
      "/fontawesome-webfont*",
      "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
    ]
  }
}

Font Awesome not working, icons showing as squares

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

---

Related Topics