FA字形只顯示爲正方形

我搜索了所有在互聯網上尋找答案，爲什麼不管我做的圖形只是不會顯示給我。他們只顯示爲一個小方塊「[]」。FA字形只顯示爲正方形

我確定我已鏈接到正確的路徑。並有我的項目中的所有文件像其他論壇帖子所說，我甚至試圖改變字體家庭像某人建議，但沒有任何改變。

我錯過了什麼嗎？有人能以最簡單的方式向我解釋這個問題嗎？我對HTML和CSS仍然很陌生，很容易混淆！

.main{ 
 
    overflow: auto; 
 
    background: url(portal.png), black; 
 
    max-width: 100%; 
 
    min-height: 900px; 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.main-nav{ 
 
    text-align: right; 
 
    margin: 50px 50px 0 0; 
 
} 
 

 
.main-nav li{ 
 
    display: inline; 
 
    text-align: center; 
 
    padding: 20px; 
 
    font-size: 22px; 
 
} 
 

 
.main-nav li a{ 
 
    color: #A8F766; 
 
    text-decoration: none; 
 
} 
 

 
.main-nav li a:hover{ 
 
    color: #fff; 
 
    text-decoration: none; 
 
    border-bottom: 2px #A8F766 solid; 
 
} 
 

 
.main-text h1{ 
 
    text-align: center; 
 
    margin-top: 150px; 
 
    color: #fff; 
 
    font-size: 70px; 
 
} 
 

 
.fa-bath{ 
 
    font-size: 90px; 
 
    color: green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Practice</title> 
 
    <link href="bootstrap.css" rel="stylesheet" type="text/css"> 
 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
 
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 

 
    </head> 
 

 
    <body> 
 
    <div class="main"> 
 
     <nav> 
 
     <ul class="main-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
     </nav> 
 

 
     <div class="main-text"> 
 
     <h1>Placeholder.<i class="fa fa-gamepad"></i><br>Placeholder.<br>Placeholder.</h1> 
 
     </div> 
 
    </div> 
 

 
    </body> 
 
</html>

來源

2016-12-01 Cydo Entis

鏈接bootstrap.js 可以從http://getbootstrap.com/ –

這看起來像路徑的問題。是否所有的.css文件存儲在單個文件夾或不同的文件夾？如果它們存儲在不同的文件夾中，可以請列出.css文件的文件夾結構嗎？

此外，只是想指出一種替代方法，使用BootstrapCDN直接鏈接的CSS文件。

例如，以下爲我工作：

.fa-gamepad { 
 
    color:blue; 
 
}

<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
</head> 
 
<body> 
 
    <h1>Game pad</h1> 
 
    <i class="fa fa-gamepad fa-5x"></i> 
 
</body>

來源

2016-12-01 02:21:55 learningloop

下載我的文件夾看起來像這樣：主包含bootstrap.css，styles.css，index.html和我的2張圖片的Project Folder。然後我有獨立的CSS文件夾，其中包含所有字體超棒的文件。 –

@CydoEntis如果您使用的是Linux文件系統，並且如果文件夾名稱是'CSS'而不是'css'，那麼您可以更新href =「css/font-awesome.min.css」'到'href =「CSS/font-awesome.min.css「並檢查。 – learningloop

FA字形只顯示爲正方形

回答

相關問題