CSS“FasFa-Bars”沒有輸出-有解無憂

我知道 StackOverflow 上還有其他關于此問題的問題，但這些解決方案對我來說并沒有奏效。我正在嘗試創建一個帶有很酷圖示的回應式導航欄。中途，我嘗試使用了一個很棒的字體吧。我嘗試使用“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>

嘗試運行代碼，欄不能正常作業。

uj5u.com熱心網友回復：

在你想從 font-awesome 使用的任何型別的圖示類之前添加“fa”，它對我有用。

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

uj5u.com熱心網友回復：

你使用字體真棒最新版本 v5.10.0

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/379693.html

標籤：css 图标字体真棒网站图标

上一篇：如何將帶有其余文本的html圓形物體垂直居中

下一篇：下拉選單由于某種原因不起作用