为什么 font-awesome 适用于 localhost 而不是 web ？

Question

我在我的项目(mvc/asp.net) 中使用了很棒的字体。我的问题是，我正在调试项目并检查localhost，字体真棒图标没有问题。但是当发布网站并在网络上查看时，我看到的不是图标，而是小框。我确定它放置在正确的目录中（css 文件放置的位置）。

我找不到任何合适的解决方案。

顺便说一下，按钮也没有问题。一切正常，但图标不见了。

谢谢

Answer 1

我已经尝试了上述所有建议，但没有一个有效。然后我尝试将字体 CSS 文件移动到不同的 CSS 文件中，神奇的事情发生了。一切都开始工作，没有任何问题。请注意，您稍后可以通过捆绑文件捆绑新的 CSS 文件。

Answer 2

没有什么对我真正有用。 我有一个托管 Angular 应用程序的 Webform 页面。 Angular 应用程序使用 webfonts。

CssRewriteUrlTransform() 的诀窍是正确的方向，但后来我发现这个用于捆绑的扩展是最终解决方案！

AspNetBundling

您不必使用孔扩展，只需复制 CssRewriteUrlTransformFixed 类并使用它来代替原来的。

Answer 3

这对我有用：

我必须直接链接 URl

Answer 4

这取决于BundleConfig中的这行代码：

        BundleTable.EnableOptimizations = true;

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

../ 显示root path, main folder of your project。然后你必须编写路径的其余部分。

我的。如果是真的：

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;

当它为假时：

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;

Answer 5

我刚刚加载了你的网页并查看了 firebug 的 net 标签。

您的以下网址返回了 404：

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

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

我会假设那些丢失是你的图标没有显示的原因。

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

<system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Answer 6

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

Answer 7

我遇到了同样的问题。字体在本地正确显示，但是当我将其上传到服务器时，只显示空白方块。
有时可能会发生这种情况，因为 FontAwesome CSS 文件 src 属性中提到的文件名与实际字体文件名不同。就我而言，我在 fontawesome css 文件中发现它是这样的：

@字体脸{ 字体家族：'FontAwesome'; src: url('../font/fontawesome-webfont.eot?v=3.2.1')​​; src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1')​​ 格式('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1')​​ 格式('woff'), url('../font/fontawesome-webfont_aea8981c.ttf?v=3.2.1')​​ 格式('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1')​​ 格式('svg'); 字体粗细：正常； 字体样式：正常； }
但是实际的字体文件名是这样的—— 字体/fontawesome-webfont_2d2816fe.eot 字体/fontawesome-webfont_aea8981c.eot 字体/fontawesome-webfont_aea8981c.ttf 字体/fontawesome-webfont_aea8981c.woff

尽管名称在下划线后的 css 文件中没有正确匹配，但它在本地工作正常。所以很难说这可能是什么原因。
当我将 FontAwesome css 文件 src 中的文件名编辑为确切的实际名称时，它起作用了。

Answer 8

可以在此处找到为我解决此问题的另一个解决方案：https://stackoverflow.com/a/12587256/615285

从那里引用：

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

最简单的做法是让你的包路径看起来像 css 目录，这样相对 url 就可以工作，即：

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

我们在 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()));

Answer 9

为什么 font-awesome 在调试模式下有效，但在 IIS 上无效？

在 Visual Studio 中，默认情况下，某些字体文件在发布期间不包括在内：

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

这是因为他们的 build action 设置为 None，这是默认设置（在 MVC 上，在 WebForms 上不确定）。您必须转到受影响文件的属性并将其从“无”设置为“内容”。

这就是我解决它的方法（而不是像某些人建议的那样手动拖动文件）

感谢这个人：http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html

Answer 10

在我的 ASP.NET MVC 项目中，BundleConfig.cs 中启用了捆绑功能：

打开文件font-awesome.css 并将@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;
}

我必须在每个 url 之前添加 ../。

Answer 11

我遇到了同样的问题。解决办法：

1. 打开 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;
   }
   

   （根据需要更改字体值）

2. 把你的ttf字体文件复制到你的桌面然后转换成eot

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

3. 将ttf字体文件转换为svg

   http://www.freefontconverter.com/

4. 将ttf字体文件转换为woff（可选）

   http://ttf2woff.com/

5. 当 Visual Studio 2012 打开时，将所有字体（ttf、eot、svg、woff...）拖放到您的文件位置。

6. 发布您的项目