我知道在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>试着运行代码，酒吧不正常工作。
3条答案
按热度按时间cclgggtu1#
在任何你想从font-awesome使用的图标类之前添加“fa”，这对我很有效。
kpbwa7wx2#
您使用的字体真棒最新版本v5.10.0
cgyqldqp3#
尝试导入这些以及-您的问题将得到解决。