汉堡图标不显示答案

【问题标题】：Hamburger icon is not showing汉堡图标不显示
【发布时间】：2022-01-16 11:34:53
【问题描述】：

我创建了一个网站并尝试进行响应式设计。我在 youtube 上关注视频并按照视频中的方式执行所有操作，但我没有看到汉堡包图标。你知道为什么吗？它在视频中完美运行。这是我的代码的样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nikolinart</title>
    <link rel="stylesheet" href="./styles/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <nav class="navbar">
        <div class="max-width">
            <div class="logo"><a href="#">Nikolin<span>art</span></a></div>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>

    <section class="home" id="home">
        <div class="max-width">
            <div class="home-content">
                <div class="text-1">Hello and welcome to</div>
                <div class="text-2">Nikolin<span>art</span></div>
                <div class="text-3">My name is Nikolina and I'm a <span>Painter</span></div>
            </div>
        </div>
    </section>

    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore aperiam rem laboriosam corrupti sunt, aspernatur doloremque ipsum molestiae, eveniet debitis vitae tempore ea molestias atque fugiat hic voluptas dignissimos mollitia quasi earum saepe fuga cum. Vero quia blanditiis voluptatum suscipit consequuntur praesentium odit asperiores totam quod, aliquid esse voluptas voluptatem dolorum! Dolor provident, sint repellat esse voluptates facere, dolorem tempora, libero at voluptas repellendus saepe reprehenderit laudantium dicta quas id aliquid corporis. Vitae, perferendis dolores! Explicabo voluptatum officiis vel exercitationem voluptate voluptatem in qui expedita ullam voluptas doloremque modi, ratione iure assumenda nostrum architecto ipsa, minima est corporis sed consequuntur, ipsam corrupti? Ipsam fugit fuga quia tempora ut beatae aperiam impedit iste nostrum consequuntur delectus esse dignissimos, minima placeat sunt possimus. Dolor aperiam beatae id, dignissimos voluptatem vero? Dignissimos illum iste fuga quo at repellendus, recusandae itaque minima accusantium dolorem debitis voluptatem id sint facilis, odit quos aut architecto nemo atque distinctio quaerat error. Deserunt maiores dolorum distinctio placeat fugiat consectetur ipsa facilis quam, saepe ea voluptas esse est ullam itaque sapiente quidem hic. Adipisci facere minima eaque natus sapiente officiis totam magnam consectetur doloribus, consequuntur quis dolorem corporis harum blanditiis mollitia iusto molestiae repellendus quia error, neque fuga praesentium!</p>
    <script src="./script/script.js"></script>
</body>
</html>

.menu-btn {
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}

【问题讨论】：

标签： html css responsive-design hamburger-menu

【解决方案1】：

两个可能的原因：

您设置了display:none 使文本隐藏，或者您不小心使用了color:#fff（白色）并与background 具有相同的颜色

而且，你甚至没有它的内容。

.menu-btn {
    color:red;
    font-size: 23px;
    cursor: pointer;  
}

<div class="menu-btn">
     <i class="fas fa-bars">Yes</i>
 </div>

【讨论】：

【解决方案2】：

display : none 隐藏元素你需要删除那行css

【讨论】：

还是不行。我认为问题出在 HTML 中，所以我包含了所有代码。
@Niko_Niko，检查我的答案。我确实检查了您的代码，但您甚至没有图标的内容。
@James 你是对的！谢谢。
@Niko_Niko，没问题。很高兴我能帮忙:)

【解决方案3】：

在您的 CSS 属性中，您的 display 属性为 None，用于隐藏元素。将类更改为

.menu-btn {
    color: #fff;
    font-size: 23px;
    cursor: pointer;
}

另外，我看到您使用了 Font Awesome 图标并且您没有导入它们，请确保您正确导入它们。如果您使用 CDN 加载 Font Awesome，请确保在 HTML 的 HEAD 标记中添加必要的导入。

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

【讨论】：