字體真棒圖標不工作

我正在建設一個網站，但由於某種原因，我的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; 
}

來源

2016-03-31 Shreyas Sreenivas

其他圖標是否正常工作？ – Morpheus

對我來說你的代碼有效。嘗試在瀏覽器中打開開發人員工具，並檢查字體是否正確加載。 – Tobson

Morpheus其他圖標也不能正常工作 –

我創建工作JSFiddle與您的代碼，所有做工精細！我認爲你有Font Awesome庫的鏈接。將其更改爲工作鏈接，例如：

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

檢查它！

來源

2016-03-31 10:16:11

我不知道爲什麼這會降低效果。這是正確的答案。 CDNJS庫不參考字體文件，但是maxcdn。 – ZimSystem

字體真棒圖標不工作

回答

相關問題