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