我正在根據在線教程建立一個網站，我在選單圖示中使用了很棒的字體。鑒于我的代碼中存在 CDN 以及不同圖示的鍵碼，我在網頁上看不到該圖示。
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with-device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="images/logo.png"></a>
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<i class="fas fa-bars"></i>
</nav>
<div class="text-box">
<h1>Manipulating the world, bit by bit.</h1>
<p>Making a website is now one of the easiest thing in the world.</p>
<a href="" class="hero-btn">Contact Us to know more</a>
</div>
</section>
</body>
</html>
樣式.css：
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 150px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 40px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
nav .fa{
display: none;
}
@media(max-width: 700px){
.text-box h1{
font-size: 20px;
}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
nav .fa{
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
我嘗試了各種解決方案，例如檢查我是否使用了與字體真棒版本一致的圖示的正確鍵碼。有人可以幫忙嗎？提前致謝
這是它現在顯示的影像：
uj5u.com熱心網友回復：
將您的 CDN URL 更新為：
https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css
更改版本后為我作業。
uj5u.com熱心網友回復：
單擊此處復制鏈接標簽并替換您的 CDN
uj5u.com熱心網友回復：
嘗試更改為版本 5，這就是我在教程不作業時所做的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454945.html