为什么我的搜索栏按钮没有放大镜？

Question

你好, 我正在向我的网站添加一个搜索栏，但是当它添加
来自 font awesome 的放大镜，它没有显示。
我只在搜索栏中添加了 css，因为我有
其他一切都设置得很好
有什么问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>OnTop Servers</title>
</head>
<body>
    <nav class="topnav">
        <div class="topnav-right">
        <a class="active" href="index.html">Home</a>
        <a href="search.html">Search</a>
        <a href="servers.html">Servers</a>
        </div>
         <h2 class="title">
            OnTop Servers
        </h2>
    </nav>
    <center>
        <div class="welcome">
            <div class="centered-text">
                <div class="welcome-body-inner">
                <h2 class="head">
                    DISCOVER
                    <span class="discord-logo">discord1</span>
                    SERVERS
                </h2>
                <h3 class="body">
                    Find amazing servers to interact with and make friends
                </h3>
                  <div class="search-box">
                      <input class="search-txt" type="text" name="" placeholder="Search..">
                      <a class="search-btn" href="">
                        <i class="fas fa-search"></i>
                      </a>
                  </div>
                </div>
            </div>
        </div>
    </center>

这是搜索栏的 css：

.search-box {
  position: absolute;
  top: 100%;
  left: 35%;
  transform: translate(-50%, -50%);
  background: #2c2c2c;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-btn {
  color: #fff;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2c2c2c;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 1

您的代码问题在于您没有准确地包含 Font Awesome 文件或 CDN 或图标。您必须从下载 Font Awesome 图标或简单地使用 CDN（推荐）

我给你font awesome的CDN，把这行代码放在代码的<head>部分

CDN 是：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> 或者您可以按照 youtube 中的教程下载这些图标

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <title>OnTop Servers</title>
</head>
<body>
    <nav class="topnav">
        <div class="topnav-right">
        <a class="active" href="index.html">Home</a>
        <a href="search.html">Search</a>
        <a href="servers.html">Servers</a>
        </div>
         <h2 class="title">
            OnTop Servers
        </h2>
    </nav>
    <center>
        <div class="welcome">
            <div class="centered-text">
                <div class="welcome-body-inner">
                <h2 class="head">
                    DISCOVER
                    <span class="discord-logo">discord1</span>
                    SERVERS
                </h2>
                <h3 class="body">
                    Find amazing servers to interact with and make friends
                </h3>
                  <div class="search-box">
                      <input class="search-txt" type="text" name="" placeholder="Search..">
                      <a class="search-btn" href="">
                        <i class="fas fa-search"></i>
                      </a>
                  </div>
                </div>
            </div>
        </div>
    </center>

希望你今天过得愉快！

为什么我的搜索栏按钮没有放大镜？

Why does my scearch ber button not have the magnifying glass?

html

css

font-awesome