字体真棒图标不起作用

Question

我正在建立一个网站，但由于某些原因，我的 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;
}

Answer 1

我使用您的代码创建了工作 JSFiddle，一切正常！我认为您的 link 到 Font Awesome 库无法正常工作。将其更改为工作 link，例如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

检查一下！

字体真棒图标不起作用

Font awesome icon not working

html

css

twitter-bootstrap

font-awesome