当我加载时，会加载默认图标（框）来放置我希望使用的图标（搜索框）。
我使用的图标来自 fontawsome，这是我第一次使用它。我尝试使用谷歌字体并从他们的网站获取了 unicode 以及链接（我将其添加到标题中），但它不起作用。这意味着问题可能出在我的代码上，或者可能出在浏览器或 Visual Studio 代码上，但我不确定。回到 font awsome，我尝试了其他 unicode（随机的）并且出现了图标，但是当我使用 unicode 作为搜索图标时，它不适用。我使用 unicode 的原因是因为它更快、更省力。另外我尝试在搜索小部件的占位符中使用它。你可以在下面的代码中看到。
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/49457cc726.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
li, a, button {
font-family: "Montserrat";
font-weight: 500;
font-size: 12px;
color: rgb(255, 255, 255);
text-decoration: none;
}
header {
border-radius: 8px;
background-color: rgb(167, 75, 52);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.logo {
cursor: pointer;
width: 100px;
}
.nav_links {
list-style: none;
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.nav_links li {
margin-right: 20px;
position: relative;
}
.nav_links a{
transition: all 0.5s ease ;
position: relative;
}
.nav_links li a:hover{
color: rgb(197, 180, 21);
}
.nav_links a::before{
content: "";
height: 3px;
width: 0%;/* start with 0% width*/
background: rgb(255, 0, 0);;
position: absolute;
left: 50%;/*start from centre*/
transform: translateX(-50%);
bottom: -8px;
opacity: 0;
transition: opacity 0.3s, width 0.3s;
pointer-events: none;
}
.nav_links a:hover::before{
width: 100%;
opacity: 1;
}
.cta button {
cursor: pointer;
border-radius: 8px;
background-color: rgb(71, 71, 71);
color: #ffffff;
padding: 8px 20px;
border: none;
}
.cta
.nav_links, .cta {
display: flex;
align-items: center;
}
.cta button:hover{
transition: all 0.5s ease ;
background-color: rgb(255, 0, 0);
}
.search{
border-radius: 5px;
border: none;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
padding: 5px 30px;
outline: none;
}
</style>
</head>
<body>
<header>
<img class="logo" src="redfox symbol only color.png" alt="logo">
<h1></h1>
<input type="search" class="search" placeholder=" search movie">
<div class="nav_links">
<li><a href="#">Upcoming</a></li>
<li><a href="#">Top 5</a></li>
<li><a href="#">recomended</a></li>
<li><a href="#">Genre</a></li>
<li><a href="#">rate tour</a></li>
</div>
<div class="cta">
<button>About</button>
</div>
</header>
</body>
</html>
尝试在您的
<meta charset='UTF-8'/>中使用
<head>