CSS "Fas Fa-Bars" 没有输出

Question

我知道 Whosebug 上还有其他关于此的问题，但这些解决方案对我来说都没有解决。我正在尝试创建一个带有炫酷图标的响应式导航栏。中途，我尝试使用一个很棒的字体吧。我尝试使用“Fas fa-bar”，但没有用。这是我的代码：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

    <title>Document</title>
</head>
<body>

    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="check-btn">
            <i class="fas fa-bars"></i>
        </label>
        <label class="logo">Aeotic</label>

        <ul>
            <li> <a class="active" href="#">Home</a> </li>
            <li> <a href="#">About</a> </li>
            <li> <a href="#">Contact</a> </li>
            <li> <a href="#">Services</a> </li>
            <li> <a href="#">Feedback</a> </li>
        </ul>
    </nav>

    <style>
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
        }

        body {
            font-family: 'Nunito', sans-serif;
        }

        nav {
            background: #0082e6;
            height: 80px;
            width: 100%;
        }

        label.logo {
            color: white;
            font-size: 35px;
            line-height: 80px;
            padding-left: 100px;
            font-weight: bold;
        }

        nav ul {
            float: right;
            margin-right: 20px;
        }

        nav ul li {
            display: inline-block;
            line-height: 80px;
            margin: 0 5px;
        }

        nav ul li a {
            color: white;
            text-transform: uppercase;
            padding: 7px 13px;
            border-radius: 3px;
        }

        a.active, a:hover {
            background: #1b9bff;
            transition: 0.5s;
        }

    </style>

</body>
</html>

尝试运行代码，栏无法正常工作。

Answer 1

在任何一种图标前添加“fa”class 你想使用 font-awesome，它对我有用。

            <i class="fa fas fa-bars"></i>

Answer 2

你用的font awesome最新版v5.10.0

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

CSS "Fas Fa-Bars" 没有输出

CSS "Fas Fa-Bars" give no output

css

favicon

icons

font-awesome