为什么font-awesome可以在本地主机上工作，而不能在web上工作?-Whyfont-awesomeworksonlocalhostbutnotonweb?

59  

I've just loaded your webpage and checked the net tab of firebug.

我刚刚加载了你的网页并检查了firebug的net选项卡。

your following urls returned a 404:

您的下列网址返回404:

http://www.senocakonline.com/Content/font/fontawesome-webfont.woff

http://www.senocakonline.com/Content/font/fontawesome-webfont.woff

http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf

http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf

i would assume that those being missing is the reason your icons aren't displaying.

我认为那些丢失的是你的图标不显示的原因。

UPDATE: 23.10.2015 to make it available just add this code to your WebConfig:

更新:23.10.2015要使其可用，只需将此代码添加到您的WebConfig中:

33  

Why font-awesome works on debug mode but not on IIS?

为什么在调试模式下，而不是在IIS上，为什么会有很棒的工作呢?

In Visual Studio, by default, some font files are not including during Publish:

在Visual Studio中，默认情况下，有些字体文件在发布期间不包含:

• .eot
• .eot
• .json
• . json
• .ttf
• .ttf
• .woff
• .woff

This is because their build action is set to None, this is by default (on MVC, not sure on WebForms). You must go to the affected file's properties and set it from "None" to "Content".

这是因为他们的构建操作被设置为None，这是默认的(在MVC上，在WebForms上不确定)。您必须访问受影响文件的属性，并将其从“None”设置为“Content”。

This is how I solved it (not by manually dragging the files as some may suggest)

这就是我解决它的方法(不是像有些人建议的那样手动拖拽文件)

Credits goes to this guy: http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html

值得称道的是:http://edsykes.blogspot.com/2012/09/aspnet build-action -with-ttf-eot-and.html

8  

I had the same problem. The solution:

我也有同样的问题。解决方案:

1. Open CSS file and delete the current font-face section and replace with these:

   打开CSS文件，删除当前字体部分，并替换为:

   @font-face {
   
       font-family: FontAwesome;
       src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */
            url('/Content/fonts/fontawesomewebfont.svg'),
            url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */
       font-weight: normal;
       font-style: normal;
   }
   

   (change the font-face values as you want)

   (根据需要更改字体值)

2. Copy your ttf font file on your desktop then convert to eot

   在桌面上复制ttf字体文件，然后转换为eot

   http://www.kirsle.net/wizards/ttf2eot.cgi

   http://www.kirsle.net/wizards/ttf2eot.cgi

3. Convert ttf font file to svg

   将ttf字体文件转换为svg

   http://www.freefontconverter.com/

   http://www.freefontconverter.com/

4. Convert ttf font file to woff (optional)

   将ttf字体文件转换为woff(可选)

   http://ttf2woff.com/

   http://ttf2woff.com/

5. Drag and drop these all fonts (ttf, eot, svg, woff... ) to your file location when Visual Studio 2012 is open.

   拖放这些字体(ttf、eot、svg、woff…)当Visual Studio 2012打开时，将其发送到您的文件位置。

6. Publish your project

   发布您的项目

7  

Another solution that solved this issue for me can be found here: https://stackoverflow.com/a/12587256/615285

另一个解决这个问题的解决方案可以在这里找到:https://stackoverflow.com/a/12587256/615285

Quoting from there:

引用:

The issue is most likely that the icons/images in the css files are using relative paths, so if your bundle doesn't live in the same app relative path as your unbundled css files, they become broken links.

问题很可能是css文件中的图标/图像使用的是相对路径，因此，如果您的bundle与未绑定的css文件不在同一个应用程序的相对路径中，那么它们将成为断开的链接。

The easist thing to do is to have your bundle path look like the css directory so the relative urls just work, i.e:

最简单的做法是让你的bundle路径看起来像css目录，这样相对url就可以工作了，例如:

new StyleBundle("~/Static/Css/bootstrap/bundle")

We have added support for this in the 1.1beta1 release, so to automatically rewrite the image urls, you can add a new ItemTransform which does this rebasing automatically.

我们在1.1beta1版本中添加了对它的支持，因此要自动重写图像url，您可以添加一个新的ItemTransform，该转换可以自动地进行重设。

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

2  

It depends on this code line in BundleConfig:

这取决于BundleConfig中的代码行:

        BundleTable.EnableOptimizatiOns= true;

if it is true, you have to change your Font files's path;

如果这是真的，你必须改变字体文件的路径;

../ is shows root path, main folder of your project. And then you have to write rest of the path.

. ./显示您的项目的主文件夹根路径。然后你要写下剩下的路径。

Mine. When it's true:

我的。当这是真的:

font-family: 'Icons';
    src:url('../_include/css/fonts/Icons.eot');
    src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'),
        url('../_include/css/fonts/Icons.woff') format('woff'),
        url('../_include/css/fonts/Icons.ttf') format('truetype'),
        url('../_include/css/fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;

When it's false:

当它是错误的:

font-family: 'Icons';
    src:url('fonts/Icons.eot');
    src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'),
        url('fonts/Icons.woff') format('woff'),
        url('fonts/Icons.ttf') format('truetype'),
        url('fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;

1  

It is also a MIME TYPE problem in the IIS, just add the file extension .woff and it will work

这也是IIS中的MIME类型问题，只要添加文件扩展名.woff就可以了

1  

this worked for me :

这对我起了作用:

I had to link the Directly URl

我必须直接链接URl

0  

In my ASP.NET MVC project with bundling enabled in BundleConfig.cs what worked was this:

在我的ASP。NET MVC项目在BundleConfig中启用绑定。cs有效的是:

Open the file font-awesome.css and change @font-face to this:

font-awesome打开文件。css和change @font-face:

@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') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

I had to add ../ before each url.

我不得不加上……/在每个url。

0  

I had the same problem. Fonts were shown on local properly but when I uploded it to server, only blank squares were shown.
Sometimes it may happen because the filename mentioned in FontAwesome CSS file src attribute is different from the actual font file name. In my case I found it like this in fontawesome css file:

我也有同样的问题。字体被正确地显示在本地，但当我把它上传到服务器时，只显示了空白的方块。有时可能会发生，因为在FontAwesome CSS文件src属性中提到的文件名不同于实际的字体文件名。在我的案例中，我在fontawesome 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') format('embedded-opentype'),
                url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),
                url('../font/fontawesome-webfont_aea8981c.ttf?v=3.2.1') format('truetype'),
                url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        

        font/fontawesome-webfont_2d2816fe.eot
        font/fontawesome-webfont_aea8981c.eot
        font/fontawesome-webfont_aea8981c.ttf
        font/fontawesome-webfont_aea8981c.woff
        

though the name didn't match properly in css file after underscore, it was working fine on local. So it was hard to tell what was the probable cause for that.
When I edited the name of file in FontAwesome css file src to the exact actual names, it worked.

尽管在css文件中，下划线之后的名称并不匹配，但是在本地版本中，它仍然运行良好。所以很难判断出可能的原因是什么。当我将FontAwesome css文件src中的文件名称编辑成确切的实际名称时，它成功了。