Font Awesome菜单图标在Chrome等主流浏览器不显示的问题求助

AI 小北

2026-7-12

问题

已在页面head标签中引入Font Awesome 6.4.0的CDN链接，但响应式网站的fa-bars菜单图标在Chrome、Firefox、Microsoft Edge中均无法显示，未修改任何CSS。开发者工具中标签情况如图（图标不显示、标签结构情况）。代码示例如下：

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

<nav>
    <div class="container navbar">
        <a href="#" class="logo">Portfolio</a>

        <div class="nav-div">
                <i class="fa-solid fa-bars"></i>
        </div>
        <input type="checkbox" id="menu">
        <ul class="active">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#works">Works</a></li>
            <li><a href="#resume">Skill</a></li>
            <li><a href="#service">Service</a></li>
            <li><a href="#" class="btn">Hire Me</a></li>
        </ul>
    </div>
</nav>

解决方法

先确认CDN有效性：把Font Awesome的CSS链接复制到浏览器地址栏打开，看能否正常加载文件。如果加载失败，换用官方CDN链接：https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css
换类名测试：虽然fa-solid fa-bars是Font Awesome 6的正确写法，但可以临时换成旧版的fa fa-bars，排查类名兼容问题
清除缓存强制刷新：按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除浏览器缓存，避免旧缓存影响加载
检查元素是否被隐藏/覆盖：打开开发者工具，查看<i>标签或父容器.nav-div是否被设置了display: none、visibility: hidden，或是被其他元素遮挡
核查网络请求状态：在开发者工具的「网络」面板过滤CSS请求，确认Font Awesome的CSS文件是否成功加载，状态码需为200
强制设置图标样式：给<i>标签添加内联样式，比如<i class="fa-solid fa-bars" style="font-size:24px; color:#000;"></i>，排除因图标尺寸过小、颜色与背景一致导致看不见的情况