Fatal编程技术网
  • css/
  • Css 当我访问某些URL时，字体图标不会显示

Css 当我访问某些URL时，字体图标不会显示

css

Css 当我访问某些URL时，字体图标不会显示,css,font-awesome,Css,Font Awesome,我正在一个react项目中使用font awesome的脱机版本。我按照这个来设置它。我的问题是图标在某些页面上有效，但在其他页面上无效。例如他们在localhost/courses上工作，但在localhost/courses/1上不工作。或者他们在localhost/authors上工作，但不在localhost/authors/1上工作。我希望你能看到这种模式。我如何着手解决这个问题？下面是我如何实现当前解决方案的。 我下载了包含几个文件夹的脱机包。然后我在标记中引用了/css/all.c

我正在一个react项目中使用font awesome的脱机版本。我按照这个来设置它。我的问题是图标在某些页面上有效，但在其他页面上无效。例如他们在
localhost/courses
上工作，但在
localhost/courses/1
上不工作。或者他们在
localhost/authors
上工作，但不在
localhost/authors/1
上工作。我希望你能看到这种模式。我如何着手解决这个问题？下面是我如何实现当前解决方案的。 我下载了包含几个文件夹的脱机包。然后我在
标记中引用了
/css/all.css
和
/js/all.jsinside

<head>
  <link href="/folder/css/all.css" rel="stylesheet">
  <script defer src="/folder/js/all.js"></script>
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>
让我试着回答你的问题

最安全的方法是使用以下字体资源的完整URL（或其他完整URL，如果您的URL不同，则我提供）：
另一种解决方案是使用如下代码（通过添加../），但您必须计算URL结构在特定页面上工作的时间：

<head>
  <link href="../folder/css/all.css" rel="stylesheet">
  <script defer src="../courses/folder/js/all.js"></script>
</head>
我希望这个解决方案对您有用。

让我试着回答您的问题

最安全的方法是使用以下字体资源的完整URL（或其他完整URL，如果您的URL不同，则我提供）：
另一种解决方案是使用如下代码（通过添加../），但您必须计算URL结构在特定页面上工作的时间：

<head>
  <link href="../folder/css/all.css" rel="stylesheet">
  <script defer src="../courses/folder/js/all.js"></script>
</head>
我希望这个解决方案对您有用。

我使用React的
%PUBLIC\u URL%
解决了这个问题，React提供了该解决方案-scripts@0.5.0更高。你可以读到它。下面是我现在如何引用font awesome文件，因为它们位于React项目的
public
文件夹中名为
font awesome
的文件夹中

<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/font-awesome/css/all.css">
<script defer src="%PUBLIC_URL%/font-awesome/js/all.js"></script>
我通过使用React的
%PUBLIC\u URL%
解决了这个问题，React提供了React-scripts@0.5.0更高。你可以读到它。下面是我现在如何引用font awesome文件，因为它们位于React项目的
public
文件夹中名为
font awesome
的文件夹中

<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/font-awesome/css/all.css">
<script defer src="%PUBLIC_URL%/font-awesome/js/all.js"></script>
能否提供开发人员控制台的屏幕截图？控制台中没有任何内容。但是，我检查了网络选项卡，发现我可以预览图标所在页面上的all.css和all.js文件。另一方面，我无法预览图标不起作用的页面上的文件。当我点击他们时，我得到一条信息“你需要启用JavaScript来运行这个应用程序。”你能提供一个开发者控制台的屏幕截图吗？控制台中没有任何内容。但是，我检查了网络选项卡，发现我可以预览图标所在页面上的all.css和all.js文件。另一方面，我无法预览图标不起作用的页面上的文件。当我点击它们时，我会收到一条信息“你需要启用JavaScript来运行这个应用程序。”谢谢@kokom，不幸的是这些解决方案对我不起作用。谢谢@kokom，不幸的是这些解决方案对我不起作用。