asp.net-mvc 为什么 font-awesome 在 localhost 上工作而不在 web 上工作？

Question

提问by ethelrsn

I'm using font awesome in my project(mvc/asp.net). My problem is, I was debugging the project and check on localhost, there was no problem with font awesome icons. But when published the website and check on web, instead of icons, i saw small boxes. I'm sure that it's placed in right directory(where cssfiles placed).

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

I couldn't find any proper solution.

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

By the way there is also no problem with buttons. They are all ok but icons are gone.

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

Thanks

谢谢

Answer 1

回答by AdamWhite

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

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

your following urls returned a 404:

您的以下网址返回了 404：

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

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：

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

Answer 2

回答by Yorro

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

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

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

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

.eot
.json
.ttf
.woff

.eot
.json
.ttf
.woff

This is because their build actionis 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 上不确定）。您必须转到受影响文件的属性并将其从“无”设置为“内容”。

enter image description here

在此处输入图片说明

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-actions-with-ttf-eot-and.html

Answer 3

回答by Mason240

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 文件中的图标/图像使用了相对路径，因此如果您的捆绑包与未捆绑的 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:

最简单的方法是让你的包路径看起来像 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()));

Answer 4

回答by Mr. Zoidberg

I had the same problem. The solution:

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

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

@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)

Copy your ttf font file on your desktopthen convert to eot
http://www.kirsle.net/wizards/ttf2eot.cgi
Convert ttf font file to svg
http://www.freefontconverter.com/
Convert ttf font file to woff (optional)
http://ttf2woff.com/
Drag and drop these all fonts (ttf, eot, svg, woff... ) to your file location when Visual Studio 2012 is open.
Publish your project

打开 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 值）

复制桌面上的 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

回答by Ebleme

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.

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

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;

Answer 6

回答by Michael Mora Montero

this worked for me : < link href="~/Content/font-awesome-4.2.0/css/font-awesome.css" rel='stylesheet' type='text/css' />

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

I had to link the Directly URl

我必须直接链接 URl

Answer 7

回答by Bachask8

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

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

Answer 8

回答by amit kumar

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 中的文件名编辑为确切的实际名称时，它起作用了。

Answer 9

回答by Leniel Maccaferri

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.cssand change @font-faceto this:

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

I had to add ../before each url.

我必须../在每个url.

Answer 10

回答by Franki1986

Nothing realy worked for me. I have a Webform page that hosts an angulular application. The angular application uses the webfonts.

没有什么对我有用。我有一个 Webform 页面，其中包含一个 angular 应用程序。angular 应用程序使用 webfonts。

The trick with CssRewriteUrlTransform() was the right direction, but then I found this extension for bundleing that did the final solution!

使用 CssRewriteUrlTransform() 的技巧是正确的方向，但后来我发现这个捆绑扩展完成了最终的解决方案！

AspNetBundling

You don't have to use the hole extension, just copy the CssRewriteUrlTransformFixed class and use it instead of the original.

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

asp.net-mvc 为什么 font-awesome 在 localhost 上工作而不在 web 上工作？

提问by ethelrsn

回答by AdamWhite

回答by Yorro

回答by Mason240

回答by Mr. Zoidberg

回答by Ebleme

回答by Michael Mora Montero

回答by Bachask8

回答by amit kumar

回答by Leniel Maccaferri

回答by Franki1986

相关推荐

最近更新

标签

asp.net-mvc 为什么 font-awesome 在 localhost 上工作而不在 web 上工作？

提问by ethelrsn

回答by AdamWhite

回答by Yorro

回答by Mason240

回答by Mr. Zoidberg

回答by Ebleme

回答by Michael Mora Montero

回答by Bachask8

回答by amit kumar

回答by Leniel Maccaferri

回答by Franki1986

相关推荐

asp.net-mvc 提交表单并将数据传递给 FileStreamResult 类型的控制器方法

asp.net-mvc 在 jsTree 上下文菜单中创建自定义项

asp.net-mvc 如何在 ASP.NET MVC 4 应用程序中使用会话？

asp.net-mvc IIS 错误服务器可能未配置为访问请求的 URL

相关推荐

最近更新

标签