2016-03-31 28 views
2

Ich baue eine Website, aber aus irgendeinem Grund funktioniert meine fa-home nicht.Font awesome icon funktioniert nicht

HTML-Code:

<!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:

@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

Funktionieren andere Symbole? – Morpheus

+0

Für mich funktioniert dein Code. Versuchen Sie, die Entwicklerwerkzeuge im Browser zu öffnen und überprüfen Sie, ob die Schriftart korrekt geladen wird. – Tobson

+0

Morpheus die anderen Symbole funktionieren auch nicht –

Antwort

3

I erstellt JSFiddle mit Ihrem Code arbeiten, alle Arbeiten gut! Ich denke, Sie haben einen uninteressanten Link zu Font Awesome Bibliothek. Ändern Sie es in Arbeitslink, zum Beispiel:

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

Überprüfen Sie es!

+0

Ich weiß nicht, warum das Downvotes hat. Dies ist die richtige Antwort. Die CDNJS-Bibliotheken verweisen nicht auf die Schriftartendateien, aber maxcdn tut dies. – ZimSystem