我在整个互联网上进行了搜索，寻找答案来说明为什么无论我做什么，字形图标都不会出现在我面前。它们只显示为一个小方 block “[]”。
我已确保链接到正确的路径。并像其他论坛帖子所说的那样拥有我元素中的所有文件，我什至尝试像有人建议的那样更改字体系列，但没有任何改变。
我错过了什么吗？有人可以用最简单的术语向我解释修复方法吗？我对 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>最佳答案
这看起来像是路径问题。您所有的 .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>关于html - FA Glyphicon 仅显示为正方形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40901007/