GitHub Pages无法加载CSS及Font Awesome问题求助

阿华AIGC实验室

2026-5-28

GitHub Pages 部署后CSS样式&Font Awesome图标失效的解决方案

我之前也踩过GitHub Pages样式失效的坑，结合你的描述和代码，大概率是这几个常见问题导致的，咱们一步步来排查解决：

1. 先排查资源路径问题（最常见！）

GitHub Pages的服务器是Linux环境，严格区分文件名大小写，但本地Windows/macOS可能不区分，这很容易踩坑！比如你本地的Css文件夹，推到仓库里变成css，那页面引用./Css/style.css就会404找不到资源。

另外，要确认你的资源引用路径是否正确：

如果是用户主页仓库（比如username.github.io），根路径就是/，所以引用CSS可以用/css/style.css
如果是普通项目仓库，根路径是/仓库名/，所以引用要改成/仓库名/css/style.css，或者用相对路径../css/style.css（根据文件层级调整）

可以打开浏览器开发者工具（F12），切换到Network标签，刷新页面看看有没有红色的404请求，那就是路径不对了。

2. Font Awesome 图标加载异常

你代码里的Twitter图标显示白色，大概率是Font Awesome没有正确加载，导致显示的是默认的占位符样式。

解决方法：

优先用CDN引入：在页面的<head>里加入官方CDN链接（版本号可以选最新的）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

这样不用管本地文件的路径问题，直接加载线上资源。

如果用本地Font Awesome文件：
- 确认font-awesome文件夹已经完整推送到GitHub仓库，没有被.gitignore排除
- 检查引用路径的大小写和层级是否正确，比如<link rel="stylesheet" href="./vendor/font-awesome/css/all.min.css">

3. 自定义交互样式失效

你说的鼠标悬浮透明度效果没了，应该是自定义CSS没加载到。检查这几点：

自定义CSS文件是否已经提交到仓库，路径是否正确（同样注意大小写）
CSS选择器是否正确，比如你写的.fab.fa-twitter:hover有没有被其他样式覆盖？可以在开发者工具的Elements标签里查看该元素的样式，看看hover规则有没有生效。

建议把内联样式移到CSS文件里，更易维护也不容易出问题：

<!-- 页面里的代码 -->
<a href="https://twitter.com/amvro_" target="_blank">
  <i class="fab fa-twitter twitter-icon"></i>
</a>

/* 自定义CSS里的规则 */
.twitter-icon {
  font-size: 40px;
  color: #2AA3EF;
  transition: opacity 0.3s ease; /* 加个过渡动画更丝滑 */
}
.twitter-icon:hover {
  opacity: 0.7;
}