HTML5 UP Arcana模板子目录页面Font Awesome图标失效问题

阿华AIGC实验室

2026-5-26

解决Arcana模板子目录页面样式与Font Awesome图标异常的问题

这问题我之前帮朋友排查过，本质就是相对路径的锅！当你把页面放到/foo/或/bar/这类子目录后，浏览器会以当前页面的目录为基准去加载资源，但模板默认的资源引用是基于根目录写的相对路径，自然就找不到文件了。

给你两个最靠谱的解决方案：

方案1：改用根相对路径（推荐）

把所有CSS、Font Awesome以及其他资源的引用路径前加上斜杠/，让浏览器直接从网站根目录开始查找资源。

比如原来的模板里可能是这样写的：

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/main.js"></script>

修改成根相对路径后：

<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<script src="/js/main.js"></script>

这样不管页面在哪个子目录，浏览器都会去根目录的css/、js/文件夹找资源，完美解决路径错误问题。

方案2：添加`<base>`标签统一基准路径

如果你不想一个个改路径，可以在页面的<head>标签最顶部添加一个<base>标签，指定所有相对路径的基准为根目录：

<head>
  <base href="/">
  <!-- 下面的资源引用保持原来的相对路径即可 -->
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>

不过要注意：添加<base>后，页面内的锚点链接（比如<a href="#section">）会自动变成/#section，如果你的页面依赖锚点跳转，可能需要调整成<a href="#section" target="_self">来避免问题。

额外检查点

如果改完路径后Font Awesome图标还是不显示，记得检查Font Awesome的字体文件路径：模板里的font-awesome.css中引用字体文件的路径是相对于CSS文件本身的（比如url('../fonts/fontawesome-webfont.woff2')），只要你CSS文件的位置没动，这个相对路径就是对的，不用修改。

内容的提问来源于stack exchange，提问作者ShadowEagle