2016-03-31 22 views
2

私はウェブサイトを構築していますが、何らかの理由で私の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

他のアイコンは機能していますか? – Morpheus

+0

あなたのコードは動作します。ブラウザでデベロッパーツールを開き、フォントが正しく読み込まれているかどうかを確認してください。 – Tobson

+0

モーフィアスその他のアイコンも動作していません –

答えて

3

私はあなたのコードでJSFiddle、すべての作業罰金を働い作成!私はあなたにフォントAwesomeライブラリへのリンクがないと思います。作業リンクに変更してください。例えば、

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

これをチェックしてください。

+0

なぜこれにダウンボートがあるのか​​分かりません。これは正解です。 CDNJSライブラリはフォントファイルを参照しませんが、maxcdnはフォントファイルを参照しません。 – ZimSystem

関連する問題