我正在建立一个网站,但由于某种原因我的fa-home
无效。
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Chezzles</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<header class="header">
<p class="main-heading">Chezzles</p>
<div class="navbar">
<p class="hr"></p>
<ul class="main-navbar">
<li><a href="#"><i class="fa fa-home" style="color:#999;"></i>Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Summer</a></li>
</ul>
<p class="hr"></p>
<ul class="sub-navbar">
<li><a href="#">RSS</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</header>
<section>
<div class="container">
<div class="wrapper">
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
CSS代码:
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300italic,300,200italic,200,100italic,100,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&subset=latin,latin-ext);
p {
font-family: sans-serif;
}
.header {
width: 17.3%;
background-color: #191818;
position: fixed;
height: 100%;
}
.main-heading {
color: #fff;
margin-left: 30px;
font-family: Raleway;
}
.hr {
border-bottom: 1px solid #7B68EE;
}
.main-navbar li, .sub-navbar li {
list-style-type: none;
}
.main-navbar li a, .sub-navbar li a {
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
line-height: 3em;
color: #999;
}
答案 0 :(得分:3)
我用你的代码创建了工作JSFiddle,一切正常!我认为你有 Font Awesome 库的工作链接。将其更改为工作链接,例如:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
检查一下!