当前位置：theitroad>Html Font-Awesome css 不能在本地工作

Html Font-Awesome css 不能在本地工作

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/28585575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:31:49 　来源:igfitidea点击:

Font-Awesome css not working locally

htmlcsstwitter-bootstrapfont-awesome

提问by Jason White

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

我想在不使用 cdn 的情况下在本地使用 Font Awesome。

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.

我可以使用 cdn 链接轻松使其工作，但本地链接无法执行任何操作。

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

采纳答案by Herman Nz

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

当您在本地使用 bootstrap/font-awesome 文件时，您必须做的是：

  1. Path stored must be clear.
  2. Path written inside the font-awesome.min.css should equal to (1)
  3. Version must have the same.
  4. the fonts in folder fonts/ are indeed related to font-awesome.min.css you've got right now.
  5. you must know how to write it on your script, as in; <span class="fa fa-home"></span>, etc.
  1. 存储路径必须清晰。
  2. 写在 font-awesome.min.css 中的路径应该等于（1）
  3. 版本必须相同。
  4. 文件夹 fonts/ 中的字体确实与您现在拥有的 font-awesome.min.css 相关。
  5. 您必须知道如何在脚本上编写它，例如；<span class="fa fa-home"></span>， 等等。

回答by user170851

Writing this may be helpful for someone like me :

写这个可能对我这样的人有帮助：

Actual folder of font-awesome.min.css is public/css/font-awesome.min.css

font-awesome.min.css 的实际文件夹是public/css/font-awesome.min.css

In font-awesome.min.cssfile font-family source refers to URL *'../fonts/fontawesome-webfont.eot'. So following files must be located in public/fonts/

在font-awesome.min.css文件中 font-family 源是指 URL *'../fonts/fontawesome-webfont.eot'。所以以下文件必须位于public/fonts/

  1. FontAwesome.otf
  2. fontawesome-webfont.eot
  3. fontawesome-webfont.svg
  4. fontawesome-webfont.ttf
  5. fontawesome-webfont.woff
  6. fontawesome-webfont.woff2
  1. FontAwesome.otf
  2. fontawesome-webfont.eot
  3. fontawesome-webfont.svg
  4. fontawesome-webfont.ttf
  5. fontawesome-webfont.woff
  6. fontawesome-webfont.woff2

回答by reco

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

使用 all.css ，而不是 fontawesome-min.css 。

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

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

回答by Akon

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.

您需要链接到 all.css 文件或 all.min.css 文件，以便 font-awesome 在您的 PC 上本地工作，并确保将 webfonts 文件夹复制到 font-awesome 文件夹中。

回答by Andrew Crouse

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.

这是 5.8.1 版的更新。如上所述，您需要在本地下载字体文件才能在本地运行 font Awesome。

The folder to use is now called /webfonts

要使用的文件夹现在称为 /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)

将这些文件下载到本地并将它们放在名为 /webfonts 的文件夹中。
示例：（https://use.fontawesome.com/releases/v5.8.1/webfonts/fa-brands-400.eot）

The css is referencing the following URL's.

css 引用了以下 URL。 

../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.

所有字体文件的总大小约为 2.5 MB。

回答by sanoj lawrence

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
  • 检查路径
  • 检查 bootstrap.min.css 中的路径都一样

It will look same as in question try this

它看起来和问题一样试试这个

回答by user12379095

I tried to implement serving font-awesome.min.cssin my Djangoproject.

我试图在我的Django项目中实现服务font-awesome.min.css。

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).

问题 1。我的第一个问题是如何提供字体文件本身。最初浏览器会出现错误（无法访问字体文件）。

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"

“..../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):

因此，这解决了我的第一个问题，即字体文件应位于何处。它告诉我将它们放在创建的静态文件夹中的子文件夹“ fonts”中（在“ settings.py”文件中定义，如下所示）：

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

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

以及“urlpatterns”中的以下内容（在项目的urls.py文件中）：

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:

所以 .css 文件和相关字体的路径将是这样的：

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

Next was the problem of font filesthemselves.

接下来是字体文件本身的问题。

Issue 2:Where are the font files?

问题 2：字体文件在哪里？

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.

最初，我通过浏览器中的 CDN 路径下载字体文件（即 css 文件本身以及相关文件，其中还包括名为“ webfonts”的文件夹）。但即使将文件夹复制到“字体”文件夹后，字体也没有提供，浏览器继续产生错误。

In the ".css" file the font files are referred to but the referenced files/pathsthemselves 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").

在“ .css”文件中，引用了字体文件，但引用的文件/路径本身在“ webfonts”文件夹中不可用（如上所述，浏览器错误也证实了这一点（“..../static/my_project /fonts/fontawesome-webfont.woff2?v=4.7.0"）。

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

在网上搜索“fontawesome-webfont.woff2”时，我发现了一个网站，其中列出了可供下载的文件：

  1. fontawesome-webfont.eot
  2. fontawesome-webfont.ttf
  3. fontawesome-webfont.woff
  4. fontawesome-webfont.woff2
  5. FontAwesome.otf
  1. fontawesome-webfont.eot
  2. fontawesome-webfont.ttf
  3. fontawesome-webfont.woff
  4. fontawesome-webfont.woff2
  5. 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.

一旦文件（上面的 s.no. 1 - 5）被复制到文件夹“ fonts”中，字体就会成功地按照需要提供。

回答by Jason White

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.

看起来这是一个“fa fa-icon”类问题。我以为我在那里有它们，但它们一定是在编辑过程中丢失了 - 可能是由于版本控制不佳。

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

我想我一直错误地使用了一些 3.xx 代码。

Interesting that everything still worked using the cdn code.

有趣的是，一切仍然使​​用 cdn 代码工作。

Thanks again. Should be able to fix everything now.

再次感谢。现在应该可以解决所有问题。

Jason.

杰森。

回答by Al3x

I had the same issue on Mac OS. My solution was to

我在 Mac OS 上遇到了同样的问题。我的解决方案是

sudo chown -R _www:staff project/

相关推荐

HTML - Bootstrap - 如何裁剪图像的中心部分

HTML - Bootstrap - 如何裁剪图像的中心部分

如何仅使用 html 和 css 创建幻灯片

如何仅使用 html 和 css 创建幻灯片

Html 更改 DIV (CSS) 中字体的颜色

Html 更改 DIV (CSS) 中字体的颜色

Html 如何更改语义 UI 垂直菜单中的文本颜色？

Html 如何更改语义 UI 垂直菜单中的文本颜色？

相关推荐
最近更新
标签