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字形只显示为正方形

回答

相关问题