字体太棒了，图标显示为正方形

224

因此，我正在尝试制作营销页面的原型，并使用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>

但是所有这些都呈现在一个大方块中。有人知道会发生什么吗？

css  html  twitter-bootstrap  font-awesome 
— 康纳·布莱克
source
1
您要导入字体吗？
— mayhewr
1
可能不是。我以为您只需要包含.css文件。
— 康纳·布莱克
2
标题表明该问题特定于Chrome。是在其他浏览器中加载还是引用的字体文件出现404？
— cimmanon
1
截至2016年8月，在上述链接上找不到第3步...任何重定向？
— 萨拉·蒂瓦里
1
您可能忘记了复制webfont文件夹吗？
— 直到

Answers:

149

根据文档（第3步），您需要修改提供的CSS文件以指向站点上的字体位置。

— Mayhewr
source
5
很好的答案，只是提供一些附加信息，您也可以将字体放在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类型，如此处所示：stackoverflow.com/questions/4015816/…
— jpgrassi 2014年
1
如果您将Data URI Scheme与base64版本的字体一起使用（可以轻松地在线转换），那么您就不必担心文件路径和资源托管是否正确。
— RenaissanceProgrammer15年
注意：如果您不想修改css，只需将css和字体放在同一文件夹中，请检查一下
— shaijut 2015年
7
@tutuca：并非每个人都可以使用CDN。
— 于
188

你必须有2班，fa班级和班级标识所需的图标fa-twitter，fa-search等...

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

<!-- Correct -->
<i class="fa fa-search"></i>
— 纳比尔·卡迪米（Nabil Kadimi）
source
4
这应该是最好的答案，只要您不移动字体，CSS就会提供指向字体文件的正确位置-这使我
— 无所适从
5
注意：“ fa前缀在版本5中已弃用。新的默认值是fas实体样式和品牌的fab样式。”
— Terje Solem
1
这为我解决了！我使用的是Angular（我认为是5）和primeng，看来，真棒字体已经可以在xx.component.ts（正确呈现的图标）内的MenuItem-definitions中使用。但是：在xx.component.html中添加内容（例如带有图标的p按钮）时，必须添加fa类和 fa- <任何图标>！
— 伊戈尔（Igor）
1
@TerjeSolem您提供的信息非常重要。它解决了我的问题。因为我使用的是旧版本，但使用的是“ fas”，谢谢
— MindRoasterMir
Thanks非常感谢！我用打开的图标oi oi取得了相同的结果...丢失了第一个oi。
— 亚历山德拉
54

用这个 

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

我在Amazon Cloudfront CDN上遇到了类似的问题，但是在我开始从maxcdn加载它后，问题就解决了

— Kumar Deepam
source
6
假设您希望使用font-awesome的CDN。对于商业生产环境，我不会这样做。
— 杰伊·爱德华兹
48

这可能会有所帮助，请检查以确保您没有无意间更改了图标上的字体系列。如果您将.fa项的字体系列更改为：FontAwesome，则不会显示该图标。它总是愚蠢而渺小。

希望能对某人有所帮助。

— 布伦1818
source
11
答对了！非常感谢。Metro-UI覆盖了超棒的字体系列。我必须添加：.fa {font-family：'FontAwesome'！important; }然后它起作用了。
— 黛比2015年
1
是的 傻小。这-改变字体以改变其他字体并影响字体图标-在我身上发生了很多次，以至变得愚蠢。
— Edd
2
是的-这行怪（具体来说是！important规则）：* {font-family：'Source Sans Pro'！important}
— Svet
1
这是使用Font Awesome以避免浪费时间找麻烦的最重要和最有用的技巧。
— Dez
22

如果使用的是LESS或SASS，请打开font-awesome.less / sass文件并编辑@fa-font-path: "../font";指向实际字体的path变量：

@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;
}

与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;
}
— 乔施林克特
source
有没有办法只导入某些图标而不是全部图标？我只想将css文件编译为几个图标。
— user805981 2015年
@fa-font-path: "../fonts";为我工作。（请注意s添加了丢失的内容）
— prograhammer
18

打开您的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">
— 尔加·康德利
source
13

我尝试使用一些以前的解决方案来解决相同的问题，但是在我的情况下它们不起作用。最后，我在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">
— 伏伊坎·奇维雅诺维奇（Vojkan Cvijanovic）
source
12

我使用Font Awesome 4.3.0的只是链接maxcdn工作提到这里，

但是将您的字体和css放在同一个文件夹中来托管在您的服务器中对我来说就像

在此处输入图片说明

然后只需链接CSS：

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

希望可以帮助某人。

— Shaijut
source
8

您必须有2个类，即fas类和fa类，也许这可以工作：

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

// Correct
<i class="fa fa-search"></i>
— 以色列
source
3
没意识到这一点-从v5开始，他们现在需要fabor或fasclass而不是faclass。
— Echilon '18
7

我有这个问题。问题是我有一个字体家族CSS样式，其中！important覆盖了fontawesome字体。

— 强尼·怀特
source
我对* {字体家族有同样的问题：Helvetica，sans-serif！important; }
— Dubbo's
6

如果您使用的是Maven和Apache Wicket，还请检查以下内容，以尝试解决Font-Awesome和未加载图标的问题：

例如，如果您将文件放置在以下文件结构中

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

检查1）您是否正确使用软件包资源保护程序，以便正确加载字体文件？

您的类中扩展WebApplication的示例：

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

检查2）确保将所有字体正确传输到Web浏览器后，检查是否已实际传输到Web浏览器，即，字体文件的完整性是否发生了变化？使用Firefox和DiffDog的Web开发人员工具栏比较源目录中的文件和传输到Web浏览器的文件（用于文件比较）。

特别是如果您使用的是Maven，请注意资源过滤。不要过滤包含/ font文件的文件夹-否则它们将被破坏。

来自pom.xml的示例

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

在上面的示例中，我们不筛选包含css和字体文件的文件夹src / main / java。

有关二进制数据过滤的更多信息，请参见文档：

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

特别是文档警告：“ 警告：请勿过滤图像等二进制内容的文件！很可能会导致输出损坏。如果同时将文本文件和二进制文件作为资源，则需要声明两个互斥的资源集。第一个资源集定义了要过滤的文件，另一个资源集定义了要原样复制的文件...”

— 菲利普
source
6

我遇到了这个问题，仔细地经历了每个步骤...即使我已经使用FA已有很长时间了...然后我才意识到我的邮件CSS文件中包含以下内容：

* {
font-family: Arial !important;
}

愚蠢的错误，但这可能会在将来引爆他人！

— 杜伊
source
4

您必须将字体文件的标头Access-Control-Allow-Origin返回为*

— 电子的
source
2
究竟！使用第三方提供商提供字体真棒文件并不能解决您的问题，您只需将其传递给其他人即可解决。
— Simanas
4

截至2018年12月，我发现更容易使用bootstrapcdn上托管的稳定版本4.7.0而不是其网站上的真棒字体5.xx CDN-因为每次他们升级次要版本时，先前版本都会中断。

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

图标相同：

<i class="fa fa-facebook"></i>
— 烟碱
source
3

font-weight: 900;

我在Font Awesome 5中遇到了另一个问题。FontAwesome图标的默认font-weight应该为900，但对于span和i标签，我将其改写为400。当我更正它时，它才起作用。

这是他们在Github页面上的问题参考，https://github.com/FortAwesome/Font-Awesome/issues/11946

希望对您有所帮助。

— 马尼安
source
1
谢谢，那也是我的问题。我将字体系列设置为“ Font Awesome 5 Free”，但也需要将字体粗细设置为900！
— 汉斯·沃恩
3

如果您使用的是5. *或更高版本，则必须使用

all.css或all.min.css

包括fontawesome.css无效，因为它没有引用webfonts文件夹，也没有引用@ font-face或font-family

您可以通过在fontawesome.css或fontawesome.min.css中的font-family属性中搜索代码来进行检查

— the_haystacker
source
这个对我来说是完美的解决方案-太糟糕了，答案是如此低于到目前为止，我没有看到它，不得不由我自己看着办吧
— Cold_Class
2

您的字体路径可能不正确，从而使CSS无法加载字体和呈现图标，因此您需要提供附加字体的绞合路径。

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
— SantoshK
source
2

从版本5开始，如果您从此站点下载了软件包：

https://fontawesome.com/download

字体在all.css和all.min.css文件中。

这是您现在使用最新版本（用您的文件夹替换）的引用的样子：

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
— 真爱
source
2

在努力寻找解决方案并且没有找到官方文档有帮助之后，这为我解决了这个问题：

  1. 下载Fontawesome.zip。我正在使用5.10.2版本，我是从这里https://fontawesome.com/download获得的

  2. 在zip文件中有几个文件夹。您只需要css和webfonts文件夹 在此处输入图片说明

    1. 在您的Web项目中创建2个文件夹，并将其命名为css和webfonts。 在此处输入图片说明

这些名称是必需的。现在，将zip中的css和webfonts内容复制到项目中的相应文件夹中。就这样！

当心字体！很棒的功能使用户变得简单！

— 巴巴新
source
1

我已经从3.2.1更改为4.0.1，文件夹是字体，现在称为字体。

src：url（'../ font / fontawesome-webfont.eot？v = 3.2.1'）;

src：url（'../ fonts / fontawesome-webfont.eot？v = 4.0.1'）;

希望对您有所帮助。

— 安德烈·杜阿尔特
source
1

我使用Official Font Awesome SASS Ruby Gem并通过在我的application.css.scss中添加以下行来修复错误

@import "font-awesome-sprockets";

说明：

font-awesome-sprockets文件包含链轮资产辅助助手Sass函数，这些函数用于查找字体文件的正确路径。

— 马克拉
source
1

如果您使用的是sass并且已导入到main.scss中 @import '../vendor/font-awesome/scss/font-awesome.scss';

该错误可能来自font-awesome.scss文件，该文件正在其相对路径中查找字体文件。

因此，请记住重写$ fa-font-path变量： $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

这样，无需在您的index.html中添加CDN

— 维布尔
source
1

仔细检查fontawesome-all.css文件-在最底部，将有一个webfonts文件夹的路径。我的文件格式为“ ../webfonts”，这意味着css文件将从其所在位置向上看一级。由于我所有的css文件都位于css文件夹中，并且我将字体添加到了同一文件夹中，因此无法正常工作。

只需将您的fonts文件夹上移即可，一切都应该很好:)

经过Font Awesome 5.0测试

— 罗斯
source
这应该是首选答案，因为它可以直接回答问题，而无需链接到过时的文档。荣誉
— 凯尔冠军
1

我有同样的问题与纱线下载字体真棒5，我做了添加了min.css文件ALONG与all.js文件。

希望这可以帮助某人

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
— 恩里克·马丁内斯（Enrique Martinez）
source
1

/css/all.css文件包含核心样式以及使用Font Awesome时所需的所有图标样式。/ webfonts文件夹包含上述CSS引用并依赖的所有字体文件。

将整个/ webfonts文件夹和/css/all.css复制到项目的静态资产目录（或您希望保留前端资产或供应商资料的位置）中。

将对复制的/css/all.css文件的引用添加到要在其上使用Font Awesome的每个模板或页面的。

只需访问-https: //fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 您将得到答案。

— Dipesh Chauhan
source
0

使用绝对路径而不是相对路径为我解决了它。我正在使用相对路径（请参见下面的第一个示例），但没有用。我通过控制台检查，发现服务器返回404，找不到文件。

相对路径导致404： 

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

绝对路径跨浏览器解决了它：

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

除非您必须这样做，否则我不建议您这样做，但是它对我有用。当然，您应该对font-awesome.css文件中的所有字体格式重复此操作。

— 提姆
source
0

它对我不起作用，因为Allow from none在我的apache配置中有根目录的指令。这就是我的工作方式...

我的目录结构：

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

我的index.html具有：

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

我选择继续禁止访问我的根目录，而是在我的apache配置中为root / font-awesome /添加了另一个目录条目 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
— 用户名
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.