logo标签列表

字体神器（Font Awesome）无法正常工作，图标显示为方块。

csshtmltwitter-bootstrapfont-awesome
274

我正在尝试原型化一个营销页面，使用Bootstrap和最新的Font Awesome文件。问题是，在尝试使用图标时，页面上只会呈现出一个大正方形。

这是我如何在头部包含这些文件：

<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>

这里是我尝试使用图标的一个例子：

<i class="icon-camera-retro"></i>

但所有内容都呈现在一个大方块中。有人知道可能发生了什么吗？
2
你正在导入字体吗？ - mayhewr
1
可能不需要。我认为你只需要包含.css文件。 - Connor Black
2
标题意味着问题特定于Chrome。它在其他浏览器中加载吗？还是引用的字体文件出现了404错误？ - cimmanon
1
截至2016年8月，上述链接中找不到第三步...是否有任何重定向？ - Saurabh Tiwari
1
可能你忘记复制webfont文件夹了？ - entithat
显示剩余4条评论
44个回答
230

您需要有两个类，一个是fa类，另一个是标识所需图标的类，如fa-twitter、fa-search等。

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

Bootstrap 5 升级

注意: "fa" 前缀在版本5中已被弃用。新的默认样式是 fas 实心样式，品牌使用 fab 样式。

- Terje Solem

4
这应该是最佳答案，CSS指向正确的字体文件位置，只要您不移动它们 - 这让我感到非常困扰，谢谢。 - alex3410
8
注意：自版本5起，“fa”前缀已被弃用。新的默认样式是“fas solid”样式和品牌使用的“fab”样式。 - Terje Solem
1
这对我有用！我正在使用Angular（我想是5）以及primeng，似乎font-awesome已经可以在xx.component.ts中的MenuItem定义中正常工作（图标正确呈现）。然而：当在xx.component.html中添加一些内容时（例如带有图标的p-button），必须添加fa类和fa-<任何图标>！ - Igor
1
@TerjeSolem，您提供的信息非常重要。它解决了我的问题。因为我使用的是旧版本，但是我使用了“fas”。谢谢！ - MindRoasterMir
CSS类名混乱不堪，看起来是为了给非高级用户制造问题而设计的。即使文档也不正确，一些图标告诉你使用例如 fa-solid fa-comment 在v5中，但只有使用 fa fa-solid fa-comment 才能加载该图标，而根据他们的网站，这种方式已经被弃用了。 - Jesse Nickles
158
根据文档（第3步），你需要修改提供的CSS文件，将其指向你网站上字体的位置。
7
很好的回答，只是为了提供额外信息，你也可以将字体放置在CSS提供的默认路径中，只需打开Font-awesome.css文件，您会找到以下条目：@font-face { font-family: 'FontAwesome'; src: url（'../font/fontawesome-webfont.eot?v=3.2.1'）; src: url（'../font/fontawesome-webfont.eot?#iefix&v=3.2.1'） - Braulio
1
仅供未来遇到相同问题的ASP.NET MVC读者参考：如果您已将所有文件夹放置在正确的位置，请验证是否按照此处指出的方式在web.config文件中添加了MIME类型：https://dev59.com/ZG865IYBdhLWcg3wCqHI - jpgrassi
1
如果您使用Data URI Scheme与字体的base64版本（可以轻松在线转换），那么您就不必担心正确的文件路径和资源托管。 - RenaissanceProgrammer
11
不是每个人都能使用CDN。 - Lightness Races in Orbit
1
FontAwesome更新了托管文档 https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself - chri3g91
显示剩余5条评论
80

使用此选项

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

我曾经遇到过Amazon Cloudfront CDN的类似问题，但是当我开始从maxcdn加载它时，问题得到了解决。

8
假设您希望使用Font Awesome的CDN。对于商业生产环境，我不建议这样做。 - Jay Edwards
@JayEdwards 为什么不呢？ - Agent Zebra
因为你正在从一个不由你管理的资源中获取数据，而且这个资源可能会受到任何意外情况的影响（例如 font-awesome 的定期服务器维护，你无法控制其发生的时间，而这些时间可能对你所托管服务的地区非常不便）；更不用说你还要依赖于可能与你自己的服务完全不在同一地方托管的东西，从而增加了页面加载的不必要流量。根据你的使用情况，我建议使用 webpack 驱动的工具来本地检索所需的图标。例如，在 VueJS 中，我使用 Vue-Awesome。 - Jay Edwards
这样做不行，因为我的许多项目现在都遇到了问题，因为CDN无法访问。最好在您的服务器上托管它。 - sam kh
69

检查确保您没有意外更改了图标的字体系列。如果您将.fa项目的字体系列从FontAwesome更改，该图标将无法显示。这通常是一些愚蠢且微小的问题。

1
是的。很傻，很小的问题。这种情况 - 更改字体并影响字体图标 - 发生了很多次，变得很愚蠢。 - Edd
3
没错 - 这一行代码有问题（更具体来说，是因为 !important 规则）：* { font-family: 'Source Sans Pro' !important }。 - Svet
非常感谢！我一直在导入这个和那个，最终发现问题出在字体族的覆盖上。 - Naseem Ahamed
要小心另一个愚蠢的错误：我正在使用免费版本的font-awesome，并尝试使用fa-regular的fa-binoculars，但这仅适用于PRO版本，而fa-solid的fa-binoculars与免费版本一起使用，这让我认为我没有正确安装字体。这个答案提醒我进行健全性检查。 - zmx
24
如果您正在使用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;
}

除了在@font-face声明块中编辑路径外，与CSS相同：

@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;
}
有没有办法只导入某些图标而不是全部导入？我只想将我的 CSS 文件编译为几个图标。 - user805981
@fa-font-path: "../fonts"; 对我有效。 （注意添加了缺失的s） - prograhammer
21

打开你的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">
18

您必须有两个类，即fas类和fa-*类。请参见文档中的基本用法：

fa前缀已在版本5中弃用。新的默认样式为实心风格fas和品牌样式fab。

// Correct (version >= 5)
<i class="fas fa-search"></i>    

// Wrong (version < 5)
<i class="fa fa-search"></i>
7
从v5开始，他们现在要求使用fab或fas类而不是fa类，我之前没有意识到这一点。 - Echilon
15

我正在使用 Font Awesome 4.3.0，只需像这里提到的那样从maxcdn链接即可。

但如果你想要在自己的服务器上托管，将字体和CSS放在同一个文件夹中对我有用，就像这样：

enter image description here

然后只需链接 CSS：

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
15
如果您使用5.*或更高版本，则必须使用all.css 或 all.min.css。包含fontawesome.css是不起作用的，因为它没有引用webfonts文件夹，并且没有引用@font-face或font-family。您可以通过在fontawesome.css或fontawesome.min.css中搜索font-family属性来检查这一点。
这个对我来说是完美的解决方案 - 可惜答案太低了，我没有看到，只能自己想出来。 - Cold_Class
谢谢！问题在于我只导入了FontAwesome 5的fontawesome.css文件。而FontAwesome 4可以正常使用fontawesome.css文件。 - Huyen
使用 Blazor 给出了正确的答案！ - Frank
14

我尝试使用之前的几种解决方案来解决相同的问题，但它们在我的情况下都没有起作用。 最终，我在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">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接