响应式网站大屏隐藏FontAwesome图标失效如何解决？

核心问题排查 #

• 1. CSS引入顺序错误：你在HTML中先引入了自定义style.css，后引入FontAwesome官方样式，官方样式中对.fa元素的display规则覆盖了你写的display: none !important，直接导致大屏幕下的图标没有按预期隐藏。
• 2. viewport标签拼写错误：<meta name="viewport">的content属性中你误写为with=device-width，正确拼写为width=device-width，该错误会导致移动端响应式规则无法正常生效。
• 3. 小屏幕显示规则未启用：你在700px以下的媒体查询中，用于控制小屏幕显示图标的nav .fa规则处于注释状态，解除注释后才能实现小屏显示、大屏隐藏的需求。
• 4. FontAwesome样式引入不完整：当前仅引入了fontawesome.min.css基础样式，要正常渲染fa-bars、fa-times这类实心图标，需要引入完整的all.min.css样式包。

具体修改步骤 #

第一步：修正HTML头部代码 #

调整资源引入顺序，先引入第三方样式再引入自定义样式，同时修正viewport拼写、替换完整的FontAwesome样式：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University Website Design</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

第二步：修改style.css中的媒体查询规则 #

解除小屏幕下显示图标的规则注释，建议也加上!important避免被覆盖：

@media(max-width: 700px) {
    .text-box h1{
        font-size: 1.8rem;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: absolute;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: 0;
        text-align: left;
        z-index: 2;
    }
    nav .fa{
        display: block !important;
        color: white;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
}

可选优化 #

全局nav .fa规则中的!important可以保留也可以删除，调整引入顺序后你的自定义样式优先级已经足够覆盖第三方默认样式。

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