FA Glyphicon仅显示为正方形

时间:2016-12-01 01:09:06

标签: html css font-awesome glyphicons

我已经在互联网上搜索了为什么无论我做什么字谜都没有出现给我的答案。它们只显示为一个小方块" []"。

我已确定我与正确的路径相关联。并且我的项目中的所有文件都像其他论坛帖子一样说过,我甚至试图改变字体系列,就像有人建议但没有任何改变。

我错过了什么吗?有人能用最简单的术语向我解释这个问题吗?我对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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

这看起来像路径问题。您的所有.css文件是否都存储在单个文件夹或不同的文件夹中?如果它们存储在不同的文件夹中,您可以列出.css文件的文件夹结构吗?

另外,只想指出使用BootstrapCDN直接链接css文件的替代方法。

例如,以下为我工作:

&#13;
&#13;
.fa-gamepad {
  color:blue;
}
&#13;
<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>
&#13;
&#13;
&#13;