58

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

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

顺便说一下，按钮也没有问题。他们都很好，但图标不见了。

谢谢

4

11 回答 11

72

我刚刚加载了您的网页并检查了 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>
于 2013-02-16T10:55:45.653 回答
34

为什么 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

于 2013-12-23T07:18:18.427 回答
10

可以在这里找到为我解决此问题的另一个解决方案：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()));
于 2015-03-29T19:05:53.267 回答
8

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

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

    （根据需要更改字体值）

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

于 2013-04-20T14:47:26.843 回答
3

这取决于以下代码行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;
于 2016-02-18T13:25:51.000 回答
1

这也是IIS中的MIME TYPE问题，只需添加文件扩展名.woff即可

于 2015-09-22T16:57:46.123 回答
1

这对我有用：< link href="~/Content/font-awesome-4.2.0/css/font-awesome.css" rel='stylesheet' type='text/css' />

我必须直接链接 URL

于 2018-04-10T15:17:26.620 回答
0

在我的 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.

于 2014-01-23T14:39:59.453 回答
0

我有同样的问题。字体在本地正确显示，但是当我将它上传到服务器时，只显示空白方块。
有时可能会发生，因为 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 中的文件名编辑为确切的实际名称时，它起作用了。

于 2015-09-17T09:45:12.030 回答
0

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

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

AspNet 捆绑

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

于 2019-04-18T11:57:03.783 回答
0

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

于 2019-05-03T14:50:44.657 回答