Question

我在React项目中使用的字体真棒的脱机版本。我按照此manual进行了设置。我的问题是图标在某些页面上有效，但在另一些页面上无效。例如。它们适用于localhost/courses，但不适用于localhost/courses/1。或者他们在localhost/authors上工作，但不在localhost/authors/1上工作。希望您能看到这种模式。我该如何解决这个问题？这是我实施当前解决方案的方式。我下载了包含几个文件夹的脱机捆绑包。然后，我在/css/all.css标记内引用了/js/all.jsinside和<head>。

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

Answer 1

让我尝试回答您的问题

最安全的方法是如下使用Font Awesome资源的完整URL（或者，如果您提供的URL与我提供的URL不同，则使用其他完整URL）：

<head>
  <link href="//localhost/courses/folder/css/all.css" rel="stylesheet">
  <script defer src="//localhost/courses/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结构使其在特定页面上起作用的时间：

<head>
  <link href="../folder/css/all.css" rel="stylesheet">
  <script defer src="../courses/folder/js/all.js"></script>
</head>

我希望这个解决方案对您有用。

Answer 2

我通过使用React的%PUBLIC_URL%解决了这个问题，它可以在react-scripts@0.5.0及更高版本中使用。您可以阅读有关here的信息。鉴于它们位于React工程的font-awesome文件夹内名为public的文件夹内，这就是我现在引用超赞字体文件的方式。

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

当我访问某些网址时，不显示字体真棒图标

2 个答案: