html - Font Awesome 不适用于 HTML5 UP 模板

Question

我正在尝试使用 HTML5 UP 中的模板创建网站(至宝)。模板的结构如下所示:

/assets
/assets/css
/assets/fonts
/assets/js
/assets/sass
/index.html

当不修改任何内容时，模板会按预期工作，并且 Font Awesome 中的所有图标都会正确显示 (like here)。

现在我想像这样构建我的网站:

/assets
/assets/css
/assets/fonts
/assets/js
/assets/sass
/foo/page.html
/bar/page.html
/index.html

现在当我打开 /foo/page.html样式和 Font Awesome 图标丢失了，因为对它们的引用困惑了。

<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js"></script>

我试过这样修复它:

<link rel="stylesheet" href="../assets/css/main.css" />
<script src="../assets/js/main.js"></script>

现在样式再次起作用，但 Font Awesome 图标仍显示为框。

我也试过像这样包含 Font Awesome:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

但是，图标仍然不起作用。

改变 <a href="#" class="icon fa-twitter"></a>
到 <a href="#" class="icon fa fa-twitter"></a>
也不起作用。

更新:出于某种原因，这在 Firefox 中不起作用，但在 MS Edge 中可以正常工作。

Answer 1

旧

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

新

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">