我正在使用Font Awesome，但不希望使用HTTP添加CSS。我已下载Font Awesome并将其包含在我的代码中，但是它显示为一个带边框的方框而不是一个图标。以下是我的代码：
<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>
我想知道如何让图标显示而不是边框方框。
在我的情况下，我在我的 CSS 代码中犯了以下错误。
*{
font-family: 'Open Sans', sans-serif !important;
}
这将覆盖整个页面的所有字体系列规则。我的解决方案是将代码移动到body中，像这样。
body{
font-family: 'Open Sans', sans-serif;
}
NB: 使用CSS中的!important标志时，相同类型的任何其他CSS规则在同一元素上声明将被覆盖。
*{font-family: Raleway}，现在改为 *.not(i) {font-family: Raleway}。 - fungusanthrax当您打开font-awesome.min.css时，您会看到以下路径：
'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...
这意味着您需要创建一个名为Fonts的文件夹，然后将fontawesome-webfont.ttf（fontawesome-webfont.woff，fontawesome-webfont.eot）文件复制到该文件夹中。之后一切都应该正常工作。
summernote文件，分别为eot、ttf和woff扩展名，需要进行分发。 - ficuscrfonts而不是Fonts，在区分大小写的系统上可能会导致问题... - Jason请注意font awesome的新版本（5）使用"fas"或"fab"前缀代替"fa"前缀。
引用自他们的网站:
在版本5中，fa前缀已被弃用。新的默认样式是fas实心样式和fab品牌样式。
这就是为什么我的字体显示为空白方块的原因。现在已经解决了。
示例代码：
<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>
首先，请检查您是否有class="fa"以及图标的类别。因此，不仅仅是
<i class="fa-pencil" title="Edit"></i>
但也
<i class="fa fa-pencil" title="Edit"></i>
然后按预期工作。这解决了我的问题。
打开你的font-awesome.css文件，其中会有如下代码：
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
您必须有以下文件夹：
font awesome -> css
-> fonts
或者说最简单的方法：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
我之前也遇到了同样的问题，后来解决了，需要使用新版本（5及以上）。
使用这个 CDN 就可以了。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
检查你的CSS文件的路径是否正确。最好使用绝对链接，因为它们更容易理解，我们知道起始点在哪里，并且搜索引擎也会偏爱它们而不是相对链接。为了减少带宽，最好使用来自font-awesome服务器的链接：
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">
我遇到了同样的问题。 因此，我在我的HTML代码中添加了一个链接，而不是下载font awesome，然后它起作用了。
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>这与v5有关，一些图标在旧版本中无法使用。
这个链接对我管用！
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">