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

Question

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

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

顺便说一下按钮也没问题.它们都还可以,但图标消失了.

谢谢

Answer 1

我刚刚加载了您的网页并检查了萤火虫的网络标签.

您的以下网址返回了404:

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

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

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

更新:2015年10月23日,只需将此代码添加到您的WebConfig:

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

Answer 2

为什么font-awesome在调试模式下工作但在IIS上不工作？

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

• .eot
• 以.json
• .TTF
• .woff

这是因为它们的构建操作设置为None,这是默认情况下(在MVC上,在WebForms上不确定).您必须转到受影响文件的属性并将其从"无"设置为"内容".

这就是我解决它的方式(不是像某些人所说的那样手动拖动文件)

积分归于这个家伙:http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html

Answer 3

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

引自那里:

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

最简单的做法是让你的包路径看起来像css目录,这样相对的网址才能正常工作,即:

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 4

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

1. 打开CSS文件并删除当前的font-face部分并替换为:

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

   (根据需要更改font-face值)

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. 发布您的项目