字体很棒，不工作，图标显示为正方形-FontAwesomenotworking,iconsshowingassquares

123  

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文件以指向您站点上的字体位置。

150  

You must have 2 classes, the fa class and the class that identifies the desired icon fa-twitter, fa-search, etc …

您必须有两个类，fa类和标识希望的图标fa-twitter、fa-search等的类。

35  

Use this

使用这个

I had similar issue with Amazon Cloudfront CDN but it got resolved after I started loading it from maxcdn

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

25  

This may help, check to ensure that you haven't inadvertently changed the font family on 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.

希望可以帮助别人。

19  

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:

如果你正在使用较少或SASS，打开字体-棒。减少/sass文件，编辑路径变量@fa-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;
}

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

14  

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 :

或者最简单的方法:

11  

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中加入了这两行，它是有效的:

9  

i am using Font Awesome 4.3.0 just linking from maxcdn works as mentioned here,

我用的是字体Awesome 4。3。0从maxcdn链接到这里，

but to host in your server putting fonts and css in same folder worked for me, like this

但是在服务器中放置字体和css在同一个文件夹中对我来说是有用的，就像这样

then just link the css:

然后链接css:

hope helps someone.

希望可以帮助别人。

6  

In case you are working with Maven and Apache Wicket also check for the following in order to try to resolve the issue with Font-Awesome and icons not being loaded:

如果您正在与Maven和Apache Wicket一起工作，也要检查以下内容，以尝试用不加载的字体和图标来解决这个问题:

If you have placed your files for example in the following file structure

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

/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

Check 1) Are you correctly using a Package Resource Guard in order to allow to load the font files correctly?

检查1)您是否正确地使用了包资源保护以允许正确地加载字体文件?

Example from your class which extends WebApplication:

扩展WebApplication的类示例:

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

}

Check 2) After you have made sure that all fonts are correctly transferred to the Web Browser, check for what has been actually transferred to the Web Browser, i.e., did the integrity of the font files change? Compare the files in your source directory and the files transferred to the Web Browser using, e.g., the Web Developer Toolbar of Firefox and DiffDog (for file comparison).

检查2)确保所有字体都正确地转移到Web浏览器上，检查实际转移到Web浏览器的内容，即，字体文件的完整性是否发生了变化?比较源目录中的文件和传输到Web浏览器的文件，例如Firefox的Web Developer工具栏和DiffDog(用于文件比较)。

In particular if you are using Maven be aware of resource filtering. Do not filter the folder where your /font files are contained - otherwise they will be corrupted.

特别是，如果您正在使用Maven，请注意资源过滤。不要过滤你/字体文件所包含的文件夹-否则它们将被损坏。

Example from your pom.xml

例子从你pom.xml

    Your project
    
        
            true
            src/main/resources
        
        
            false
            src/main/java
            
                **
            
            
                **/*.java
            
        
    

In the example above we do not filter the folder src/main/java, where the css and font files are contained.

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

For further information on the filtering of binary data please also see the documentation:

有关二进制数据过滤的进一步信息，请参阅文件:

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

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

In particular the documentation warns: "Warning: Do not filter files with binary content like images! This will most likely result in corrupt output. If you have both text files and binary files as resources, you need to declare two mutually exclusive resource sets. The first resource set defines the files to be filtered and the other resource set defines the files to copy unaltered..."

特别是文档警告:“警告:不要过滤像图像这样的二进制内容的文件!”这很可能导致腐败的产出。如果您同时拥有文本文件和二进制文件作为资源，则需要声明两个互斥的资源集。第一个资源集定义要过滤的文件，而另一个资源集定义要复制的文件不被修改……

6  

I had this issue. The problem was I had a font-family CSS style with !important overriding the fontawesome font.

我有这个问题。问题是我有一个字体家族的CSS样式!

4  

This should be much simpler in the new version 3.0. Easiest is to point to the Bootstrap CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

在新版本3.0中，这应该要简单得多。最简单的方法是指向Bootstrap CDN: http://www.bootstrapcdn.com/?

2  

If your server is IIS, be sure to add the correct MIME to serve .woff file extension. The correct MIME is application/octet-stream

如果您的服务器是IIS，请确保添加正确的MIME以提供.woff文件扩展名。正确的MIME是应用程序/octet-stream。

2  

You must return the header Access-Control-Allow-Origin to * for your fonts files

您必须为您的字体文件将标题访问控制允许的来源返回到*

2  

Use this you have not defined fa classes

使用这个你没有定义fa类。

1  

I have changed from 3.2.1 to 4.0.1 and the folder was font and now is called fonts.

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

src: url('../font/fontawesome-webfont.eot?v=3.2.1');

src:url(. . /字体/ fontawesome-webfont.eot ? v = 3.2.1 ');

src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');

src:url(. . /字体/ fontawesome-webfont.eot ? v = 4.0.1”);

I hope it help someone.

我希望它能帮助某人。

1  

I use the Official Font Awesome SASS Ruby Gem and fixed the error by adding the below line to my application.css.scss

我使用了官方字体SASS Ruby Gem并通过在我的application.css.scss中添加以下行来修复错误

@import "font-awesome-sprockets";

Explanation:

解释:

The font-awesome-sprockets file includes the sprockets assest helper Sass functions used for finding the proper path to the font file.

在fontawesome - spro蟋蟀文件中包含了sprosest辅助Sass函数，用于查找到字体文件的正确路径。

1  

if your using sass and have imported in your main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

如果你使用sass并且已经导入你的主机。scss @ import“. . /供应商/ font-awesome / scss / font-awesome.scss”;

The error may come from the font-awesome.scss file that is looking for the font files in it's relative path.

这个错误可能来自字体——太棒了。scss文件，在其相对路径中查找字体文件。

So remember to override the $fa-font-path variable: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

所以记得重写$fa-font-path变量:$fa-font-path:“https://netdna.bootstrapcdn.com/font-awesome/4.3.0/字体”!

like this there is no need to add the cdn in your index.html

这样就不需要在index.html中添加cdn。

1  

It could be possible that your font path is not correct so that css not able to load the font and render the icons so you need to provide the stranded path of attached fonts.

您的字体路径可能不正确，因此css无法加载字体并呈现图标，因此您需要提供附加字体的搁浅路径。

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

1  

You must have 2 classes, the fas class and the fa class, maybe this will work:

你必须有两个班，fas班和fa班，也许这个可以:

// Wrong
    

// Correct

0  

Using absolute instead of relative paths solved it for me. I was using relative paths (see first example below) and that didn't work. I checked via console and found the server was returning a 404, files not found.

用绝对路径而不是相对路径来求解。我使用的是相对路径(参见下面的第一个例子)，但它不起作用。我通过控制台检查，发现服务器返回404文件，但没有找到。

Relative path caused a 404:

相对路径导致404:

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

Absolute path solved it cross browser:

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

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

I wouldn't recommend doing this unless you have to, but it works for me. Ofcourse, you should repeat this for all the font formats in the font-awesome.css file.

我不建议你这样做，除非你必须这样做，但这对我很有效。当然，对于font-awesome中的所有字体格式，您应该重复这一点。css文件。

0  

It wasn't working for me because I had Allow from none directive for the root directory in my apache config. Here's how I got it to work...

它对我不起作用，因为我允许从none指令到apache配置中的根目录。这是我让它工作的方法……

My directory structure:

我的目录结构:

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

where my index.html has:

我的索引。html有:

I chose to continue to disallow access to my root and instead added another directory entry in my apache config for root/font-awesome/

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

    Allow from all

0  

My problem was with adding the

我的问题是加上

inside a

在一个

tag

标签

I fixed it by placing it outside the tag.

我把它放在标签外面。

0  

What fixed the issue for me (on my Windows 7 machine) was decrypting my project directory. It's crazy how many visual and functional glitches originally arise from that when testing your website. Just get to a command prompt and run:

对我来说(在我的Windows 7机器上)解决问题的是解密我的项目目录。在测试你的网站时，你会发现很多视觉和功能上的问题。只要到达命令提示符并运行:

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

...where %PROJECT_PATH% is the full pathname to the directory where your code is stored.

…其中%PROJECT_PATH%是存储代码的目录的完整路径名。

0  

Double check the fontawesome-all.css file - at the very bottom there will be a path to the webfonts folder. Mine had "../webfonts" format in it, which meant that the css file would be looking 1 level up from where it is. As all of my css files were in css folder and I added the fonts to the same folder, this was not working.

双重检查fontawesome-all。css文件-在最底部将有一个路径到web字体文件夹。我“……的格式，这意味着css文件将从它所在的位置上升到1级。由于我所有的css文件都在css文件夹中，并且我将字体添加到相同的文件夹中，这是无效的。

Just move your fonts folder up a level and all should be well :)

只要将字体文件夹向上移动一层就可以了。

Tested with Font Awesome 5.0

使用字体Awesome 5.0进行测试

0  

Now in fontawesome 5 you can deliver a cached version of JS over Https.

现在，在fontawesome 5中，您可以通过Https交付缓存版的JS。

More info on https://fontawesome.com/get-started/svg-with-js

更多信息在https://fontawesome.com/get-started/svg-with-js上

0  

Use with the upper class

用于上层阶级

-1  

I found a solution today which was to:

我今天找到了一个解决办法:

1. Download the entire project from their Github page
2. 从Github页面下载整个项目
3. Then follow the rest of the steps on their page under the Default CSS section about moving the directory into your project and adding the link in the HEAD section of an .html file
4. 然后按照他们页面上的其余步骤，在默认的CSS部分中，将目录移动到项目中，并在.html文件的头部部分添加链接

The problem with their documentation is that they do not specify a link to where you should get a copy of the entire font-awesome project to put into your project.

他们的文档的问题是，他们没有指定一个链接到您应该在哪里获得整个font-awesome项目的拷贝到您的项目中。