Html 字体真棒不显示图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26867795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font awesome is not showing icon
提问by Ganesh
I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead of an icon. Here is my code:
我正在使用 Font Awesome 并且不希望使用 HTTP 添加 CSS。我下载了 Font Awesome 并将其包含在我的代码中，但 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>
I would like to know how to make the icon display instead of the bordered square box.
我想知道如何使图标显示而不是带边框的方框。
回答by Daniel Barde
In my case i made the following mistake in my css code.
就我而言，我在 css 代码中犯了以下错误。
*{
font-family: 'Open Sans', sans-serif !important;
}
This will override all font family rules for the entire page. My solution was to move the code to body like so.
这将覆盖整个页面的所有字体系列规则。我的解决方案是像这样将代码移动到正文中。
body{
font-family: 'Open Sans', sans-serif;
}
NB: Whenever you use the !importantflag in css, any other css rule declared of the same type on the same element will get overriden.
注意：每当您!important在 css 中使用标志时，在同一元素上声明为相同类型的任何其他 css 规则都将被覆盖。
回答by user2980426
When you open font-awesome.min.cssyou can see following path:
打开后font-awesome.min.css可以看到如下路径：
'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...
It means that you have to create directory Fontsand then copy files fontawesome-webfont.ttf(fontawesome-webfont.woff, fontawesome-webfont.eot) to this folder. After that everything should work fine.
这意味着您必须创建目录Fonts，然后将文件fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot)复制到此文件夹中。之后一切都应该正常工作。
回答by krystonen
Be aware that the new version (5) of font awesome uses "fas"or "fab"instead of "fa"prefix.
请注意，字体 awesome 的新版本 (5) 使用"fas"或"fab"代替"fa"前缀。
Quoted from their website:
引用自他们的网站：
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
fa 前缀已在第 5 版中弃用。新的默认值是 fas solid 样式和品牌的 fab 样式。
This is why my fonts were showing blank squares. Now fixed.
这就是为什么我的字体显示空白方块的原因。现在固定了。
Example code:
示例代码：
<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>
回答by OneMoreQuestion
First, check that you have class="fa" as well as whatever the icon's class is. So, not just
首先，检查您是否有 class="fa" 以及任何图标的类。所以，不仅
<i class="fa-pencil" title="Edit"></i>
But also
但是也
<i class="fa fa-pencil" title="Edit"></i>
Then it works as expected. This solved my issue.
然后它按预期工作。这解决了我的问题。
回答by Erga Kandly
Open your font-awesome.css theres code like :
打开你的 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;
}
you must have folder like :
你必须有这样的文件夹：
font awesome -> css
-> fonts
or the easiest way :
或最简单的方法：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
回答by Valentin Mercier
Check that the path to your CSSfile is correct. Rather prefer absolute links, they are easier to understand since we know where we start from and search engines will also prefer them over relative links. And to reduce bandwidth rather use the link from font-awesome servers:
检查CSS文件路径是否正确。更喜欢绝对链接，它们更容易理解，因为我们知道我们从哪里开始，搜索引擎也更喜欢它们而不是相对链接。为了减少带宽而不是使用来自 font-awesome 服务器的链接：
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">
Moreover if you use it, there will be no need of uploading extra fonts to your serverand you will be sure that you point to the right CSSfile, and you will also benefit from the latest updates instantly.
此外，如果您使用它，则无需将额外的字体上传到您的服务器，您将确保指向正确的CSS文件，并且您还将立即受益于最新的更新。
回答by Halid
i was dealing with the same problem then i figured it out i have to use new version (5 and plus)
我正在处理同样的问题，然后我发现我必须使用新版本（5 及以上）
use this cdn it will work.
使用这个cdn它会起作用。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
回答by Mickers
All the above are correct however on top of that my issue was that I downloaded the free version of FA5 which doesn't have:
以上所有内容都是正确的，但除此之外，我的问题是我下载了 FA5 的免费版本，它没有：
font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')
I could not get v5 to work so I reverted to 4.7.0 with the help of the posts above and it fixed my issue.
我无法让 v5 工作，所以我在上面帖子的帮助下恢复到 4.7.0，它解决了我的问题。
回答by paul
For a start, you shouldn't have both font-awesome.cssandfont-awesome.min.css
首先，你不应该同时拥有font-awesome.css和font-awesome.min.css
Generally, use font-awesome.cssduring development, then switch to font-awesome.min.cssonce you're happy with the site.
通常，font-awesome.css在开发期间使用，然后font-awesome.min.css在对站点感到满意后切换到。
Problems like this are often caused by relative paths and locations, so check where your html file is in relation to the css.
像这样的问题通常是由相对路径和位置引起的，因此请检查您的 html 文件相对于 css 的位置。
If your html file is in the base directory, and the css in a subfolder off the root, you would need:
href="./css/font-awesome.css"(single period)
如果您的 html 文件位于基本目录中，并且 css 位于根目录外的子文件夹中，则您需要：（
href="./css/font-awesome.css"单句点）
回答by Hrithik verma
i was facing the same issue.. so instead of downloading font awesome , i added a link in my html code and it worked.
我遇到了同样的问题..所以我没有下载很棒的字体，而是在我的 html 代码中添加了一个链接并且它起作用了。
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>