Font-Awesome css not working locally

问题

I would like to use Font Awesome locally without using the cdn.

My code fails to add font awesome icons to my page.

I can make it work easily using the cdn link but the local link fails to do anything.

Thanks

Jason.

<!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">

回答1:

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

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

回答2:

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/

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2

回答3:

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

回答4:

You need to link to the all.css file or the all.min.css file for font-awesome to work locally on your pc and make sure you copy the webfonts folder to the font-awesome folder.

回答5:

Here is an update for version 5.8.1. As mentioned above you need to download the font files locally in order to run font Awesome locally.

The folder to use is now called /webfonts

Download these files locally and put them in a folder called /webfonts.
Example: (https://use.fontawesome.com/releases/v5.8.1/webfonts/fa-brands-400.eot)

The css is referencing the following URL's.

../webfonts/fa-brands-400.eot
../webfonts/fa-brands-400.woff2
../webfonts/fa-brands-400.woff
../webfonts/fa-brands-400.ttf
../webfonts/fa-brands-400.svg
../webfonts/fa-regular-400.eot
../webfonts/fa-regular-400.woff2
../webfonts/fa-regular-400.woff
../webfonts/fa-regular-400.ttf
../webfonts/fa-regular-400.svg
../webfonts/fa-solid-900.eot
../webfonts/fa-solid-900.woff2
../webfonts/fa-solid-900.woff
../webfonts/fa-solid-900.ttf
../webfonts/fa-solid-900.svg

Total size is around 2.5 MB for all the font files.

回答6:

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

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

回答7:

I tried to implement serving font-awesome.min.css in my Django project.

Issue 1. My first problem was how to serve the font files themselves. Initially the browser would come up with error (of font files not being accessible).

However the browser errors themselves were quite revealing:

Hovering the mouse pointer on the error lines would throw the following:

"..../static/my_project/fonts/fontawesome-webfont.woff2?v=4.7.0"

So this solved my first problem as to where the font files should reside. It's telling me to put them in the sub-folder "fonts" in the static folder created (defined in the "settings.py" file like this):

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

And the following in "urlpatterns" (in the project's urls.py file):

static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

So the path of the .css file and the associated fonts would be something like this:

project_root
------ static
    -------app_name
        --------css
            ----------font-awesome.min.css
        --------fonts
            ----------<font_files>

Next was the problem of font files themselves.

Issue 2: Where are the font files?

Initially I downloaded the font file by following the CDN path in by the browser (i.e. the css file itself along with the associated files which also included the folder named "webfonts"). But even after the folder was copied to the "fonts" folder the fonts were not served up and browser continued to generate errors.

In the ".css" file the font files are referred to but the referenced files/paths themselves were not available in the "webfonts" folder (as also confirmed by the browser error as stated above ("..../static/my_project/fonts/fontawesome-webfont.woff2?v=4.7.0").

On searching the web for "fontawesome-webfont.woff2" I came across the site which had the files listed for download:

fontawesome-webfont.eot
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
FontAwesome.otf

Once the files (s.no. 1 - 5 above) were copied in the folder "fonts" the fonts were served up successfully and as desired.

回答8:

Thanks for all of your help everyone.

It looks like it was an "fa fa-icon" class issue. I thought I had them in there but they must have been lost during editing - probably due to poor version control.

I think I've been using some 3.x.x code by mistake.

Interesting that everything still worked using the cdn code.

Thanks again. Should be able to fix everything now.

Jason.