Html Font Awesome 不起作用，图标显示为正方形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14366158/
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 not working, icons showing as squares
提问by Connor Black
So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square.
所以我正在尝试制作一个营销页面的原型，我正在使用 Bootstrap 和新的 Font Awesome 文件。问题是当我尝试使用图标时，页面上呈现的只是一个大方块。
Here's how I include the files in the head:
这是我在头部包含文件的方式：
<head>
<title>Page Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
</head>
And here's an example of me trying to use an icon:
这是我尝试使用图标的示例：
<i class="icon-camera-retro"></i>
But all that gets rendered in a big square. Does anyone know what could be going on?
但所有这些都呈现在一个大方块中。有谁知道会发生什么？
采纳答案by mayhewr
According to the documentation(step 3), you need to modify the supplied CSS file to point to the font location on your site.
根据文档（第 3 步），您需要修改提供的 CSS 文件以指向您站点上的字体位置。
回答by Nabil Kadimi
You must have 2 classes, the faclass and the class that identifies the desired icon fa-twitter, fa-search, etc …
你必须有2班，fa班级和班级标识所需的图标fa-twitter，fa-search等...
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
回答by Kumar Deepam
Use this
用这个
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I had similar issue with Amazon Cloudfront CDN but it got resolved after I started loading it from maxcdn
我在 Amazon Cloudfront CDN 上遇到了类似的问题，但是在我开始从 maxcdn 加载它后它得到了解决
回答by Bren1818
This may help, check to ensure that you haven't inadvertently changed the font familyon the icon. If you have changed the .fa item's font family from: FontAwesome the icon will not show. It's always something silly and small.
这可能会有所帮助，请检查以确保您没有无意中更改了图标上的字体系列。如果您已将 .fa 项目的字体系列从：FontAwesome 更改，则该图标将不会显示。它总是一些愚蠢和小事。
Hope that helps someone.
希望能帮助某人。
回答by jonschlinkert
If you are using LESS or SASS, open the font-awesome.less/sass file and edit the path variable @fa-font-path: "../font";which points to the actual fonts:
如果您使用的是 LESS 或 SASS，请打开 font-awesome.less/sass 文件并编辑@fa-font-path: "../font";指向实际字体的路径变量：
@fa-font-path: "../font";
@font-face {
font-family: 'FontAwesome';
src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
Same with CSS, except you edit the path in the @font-face declaration block:
与 CSS 相同，除了您在 @font-face 声明块中编辑路径：
@font-face {
font-family: 'FontAwesome';
src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
回答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 Vojkan Cvijanovic
I tried to solve the same problem with a few previous solutions, but they didn't work in my situation. Finally, I added these 2 lines in HEAD and it worked:
我试图用一些以前的解决方案解决同样的问题，但它们在我的情况下不起作用。最后，我在 HEAD 中添加了这两行并且它起作用了：
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
回答by shaijut
i am using Font Awesome 4.3.0just linking from maxcdn worksas mentioned here,
我使用的Font Awesome 4.3.0只是从这里提到的maxcdn 作品链接，
but to host in your serverputting fonts and css in same folder worked for me, like this
但是在您的服务器中托管将字体和 css 放在同一个文件夹中对我有用，就像这样
then just link the css:
然后只需链接css：
<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
hope helps someone.
希望能帮助某人。
回答by Israel
You must have 2 classes, the fas class and the fa class, maybe this will work:
你必须有 2 个类，fas 类和 fa 类，也许这会起作用：
// Wrong
<i class="fas fa-search"></i>
// Correct
<i class="fa fa-search"></i>
回答by Jonny White
I had this issue. The problem was I had a font-family CSS style with !important overriding the fontawesome font.
我有这个问题。问题是我有一个字体系列 CSS 样式，其中 !important 覆盖了 fontawesome 字体。
