Font-Awesome css 在本地无法使用
Font-Awesome css not working locally
我想在不使用 cdn 的情况下在本地使用 Font Awesome。
我的代码无法将超棒的字体图标添加到我的页面。
我可以使用 cdn link 使其轻松工作，但本地 link 无法执行任何操作。
谢谢
贾森.
<!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">
在本地使用bootstrap/font-awesome个文件需要做的是：
- 存放的路径一定要清楚
- 写在字体里面的路径-awesome.min.css应该等于(1)
- 版本必须相同
- 文件夹 fonts/ 中的字体确实与 font-awesome.min.css 你现在得到的有关。
- 你必须知道如何把它写在你的剧本上，如；
<span class="fa fa-home"></span>等
检查路径是否正确并放置在正确的文件夹中
试试这个代码
<!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">
- 检查路径
- 检查 bootstrap.min.css 中的路径
都一样
它看起来和问题中的一样试试这个
感谢大家的帮助。
看起来这是一个 "fa fa-icon" class 问题。我以为我把它们放在那里了，但它们一定是在编辑过程中丢失了——可能是因为版本控制不佳。
我想我错误地使用了一些 3.x.x 代码。
有趣的是，使用 cdn 代码一切仍然有效。
再次感谢。现在应该可以解决所有问题。
贾森.
写这篇文章可能对像我这样的人有帮助:
font-awesome.min.css的实际文件夹是public/css/font-awesome.min.css
在font-awesome.min.css文件中font-family source指的是URL *'../fonts/fontawesome-webfont.eot'。因此以下文件必须位于 public/fonts/
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff2
我在 Mac OS 上遇到了同样的问题。我的解决方案是
sudo chown -R _www:staff project/
您需要 link 到 all.css 文件或 all.min.css 文件，font-awesome 才能在您的电脑上本地工作，并确保将 webfonts 文件夹复制到字体-很棒的文件夹。
这是 5.8.1 版的更新。如上所述，您需要在本地下载字体文件才能在本地使用 运行 字体 Awesome。
要使用的文件夹现在称为 /webfonts
在本地下载这些文件并将它们放在名为 /webfonts 的文件夹中。
示例：(https://use.fontawesome.com/releases/v5.8.1/webfonts/fa-brands-400.eot)
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
所有字体文件的总大小约为 2.5 MB。
使用all.css，而不是fontawesome-min。css。
参考：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
我试图在我的 Django 项目中实现 font-awesome.min.css 服务。
问题 1.
我的第一个问题是如何提供字体文件本身。最初浏览器会出现错误（ 的字体文件不可访问）。
然而，浏览器错误本身非常暴露：
将鼠标指针悬停在错误行上会抛出以下内容：
".../static/my_project/fonts/fontawesome-webfont.woff2?v=4.7.0"
所以这解决了我的第一个问题，即字体文件应该存放在哪里。它告诉我将它们放在创建的静态文件夹（在“settings.py”中定义的子文件夹“fonts”中像这样的文件):
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
以及 "urlpatterns" 中的以下内容（在项目的 urls.py 文件中）：
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
所以 .css 文件的路径和关联的字体应该是这样的：
project_root
------ static
-------app_name
--------css
----------font-awesome.min.css
--------fonts
----------<font_files>
接下来是字体文件本身的问题。
问题 2:字体文件在哪里？
最初我通过浏览器中的 CDN 路径下载字体文件（即 css 文件本身以及相关文件，其中还包括名为“webfonts").但即使将文件夹复制到 "fonts" 文件夹后，字体仍未提供，浏览器继续生成错误。
在“.css”文件中引用了字体文件，但引用的 files/paths它们本身在“webfonts”文件夹中不可用（正如上述浏览器错误所证实的那样（".../static/my_project/fonts/fontawesome-webfont.woff2?v=4.7.0 ").
在网上搜索 "fontawesome-webfont.woff2" 时，我发现了 site，其中列出了可供下载的文件：
- fontawesome-webfont.eot
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff2
- FontAwesome.otf
一旦文件（s.no. 上面的 1 - 5）被复制到文件夹“fonts”中，字体已按要求成功送达。
我想在不使用 cdn 的情况下在本地使用 Font Awesome。
我的代码无法将超棒的字体图标添加到我的页面。
我可以使用 cdn link 使其轻松工作，但本地 link 无法执行任何操作。
谢谢
贾森.
<!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">
在本地使用bootstrap/font-awesome个文件需要做的是：
- 存放的路径一定要清楚
- 写在字体里面的路径-awesome.min.css应该等于(1)
- 版本必须相同
- 文件夹 fonts/ 中的字体确实与 font-awesome.min.css 你现在得到的有关。
- 你必须知道如何把它写在你的剧本上，如；
<span class="fa fa-home"></span>等
检查路径是否正确并放置在正确的文件夹中
试试这个代码
<!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">
- 检查路径
- 检查 bootstrap.min.css 中的路径 都一样
它看起来和问题中的一样试试这个
感谢大家的帮助。
看起来这是一个 "fa fa-icon" class 问题。我以为我把它们放在那里了，但它们一定是在编辑过程中丢失了——可能是因为版本控制不佳。
我想我错误地使用了一些 3.x.x 代码。
有趣的是，使用 cdn 代码一切仍然有效。
再次感谢。现在应该可以解决所有问题。
贾森.
写这篇文章可能对像我这样的人有帮助:
font-awesome.min.css的实际文件夹是public/css/font-awesome.min.css
在font-awesome.min.css文件中font-family source指的是URL *'../fonts/fontawesome-webfont.eot'。因此以下文件必须位于 public/fonts/
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff2
我在 Mac OS 上遇到了同样的问题。我的解决方案是
sudo chown -R _www:staff project/
您需要 link 到 all.css 文件或 all.min.css 文件，font-awesome 才能在您的电脑上本地工作，并确保将 webfonts 文件夹复制到字体-很棒的文件夹。
这是 5.8.1 版的更新。如上所述，您需要在本地下载字体文件才能在本地使用 运行 字体 Awesome。
要使用的文件夹现在称为 /webfonts
在本地下载这些文件并将它们放在名为 /webfonts 的文件夹中。
示例：(https://use.fontawesome.com/releases/v5.8.1/webfonts/fa-brands-400.eot)
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
所有字体文件的总大小约为 2.5 MB。
使用all.css，而不是fontawesome-min。css。
参考：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
我试图在我的 Django 项目中实现 font-awesome.min.css 服务。
问题 1. 我的第一个问题是如何提供字体文件本身。最初浏览器会出现错误（ 的字体文件不可访问）。
然而，浏览器错误本身非常暴露：
将鼠标指针悬停在错误行上会抛出以下内容：
".../static/my_project/fonts/fontawesome-webfont.woff2?v=4.7.0"
所以这解决了我的第一个问题，即字体文件应该存放在哪里。它告诉我将它们放在创建的静态文件夹（在“settings.py”中定义的子文件夹“fonts”中像这样的文件):
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
以及 "urlpatterns" 中的以下内容（在项目的 urls.py 文件中）：
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
所以 .css 文件的路径和关联的字体应该是这样的：
project_root
------ static
-------app_name
--------css
----------font-awesome.min.css
--------fonts
----------<font_files>
接下来是字体文件本身的问题。
问题 2:字体文件在哪里？
最初我通过浏览器中的 CDN 路径下载字体文件（即 css 文件本身以及相关文件，其中还包括名为“webfonts").但即使将文件夹复制到 "fonts" 文件夹后，字体仍未提供，浏览器继续生成错误。
在“.css”文件中引用了字体文件，但引用的 files/paths它们本身在“webfonts”文件夹中不可用（正如上述浏览器错误所证实的那样（".../static/my_project/fonts/fontawesome-webfont.woff2?v=4.7.0 ").
在网上搜索 "fontawesome-webfont.woff2" 时，我发现了 site，其中列出了可供下载的文件：
- fontawesome-webfont.eot
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff2
- FontAwesome.otf
一旦文件（s.no. 上面的 1 - 5）被复制到文件夹“fonts”中，字体已按要求成功送达。