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

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

enter image description here

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

积分归于这个家伙：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版本中添加了对此的支持，因此要自动重写图像网址，您可以添加一个新的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

我遇到了同样的问题。解决方案：

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

（根据需要更改字体 - 面值）

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




http://www.kirsle.net/wizards/ttf2eot.cgi
将ttf字体文件转换为svg




http://www.freefontconverter.com/
将ttf字体文件转换为woff（可选）




http://ttf2woff.com/
当Visual Studio 2012打开时，将所有字体（ttf，eot，svg，woff ...）拖放到文件位置。
发布您的项目

Answer 5

这取决于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 6

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

Answer 7

这对我有用：＆LT; link href =＆＃34;〜/ Content / font-awesome-4.2.0 / css / font-awesome.css＆＃34;的rel =＆＃39;样式表＆＃39;类型=＆＃39;文本/ CSS＆＃39; /＆GT;

我必须链接Directly URl

Answer 8

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

我遇到了同样的问题。字体在本地显示正确但当我将其上传到服务器时，只显示空白方块。
有时可能会发生因为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

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

Answer 10

没有任何事情对我有用。我有一个托管角应用程序的Webform页面。角度应用程序使用网络字体。

使用CssRewriteUrlTransform（）的技巧是正确的方向，但是后来我发现了用于捆绑的扩展名，可以解决最终问题！

AspNetBundling

您不必使用孔扩展名，只需复制CssRewriteUrlTransformFixed类并使用它代替原始类即可。

Answer 11

我已经尝试了以上所有建议，但都没有用。然后，我尝试将字体CSS文件移动到其他CSS文件，并且魔术发生了。一切开始正常工作，没有任何问题。请注意，稍后您可以通过捆绑文件捆绑新的CSS文件。

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

11 个答案: