简体   繁体   English

字体真棒图标无法正常工作

[英]Font awesome icon not working

I'm building a website but for some reason my fa-home is not working. 我正在建立一个网站,但由于某种原因,我fa-home办公无法正常工作。

HTML Code: 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 Code: 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;
}

I created working JSFiddle with your code, all work fine! 我用您的代码创建了可工作的JSFiddle ,一切正常! I think you have unworking link to Font Awesome library. 我认为您无法使用指向Font Awesome库的链接。 Change it to working link, for example: 将其更改为工作链接,例如:

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

Check it! 核实!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM