CSS 由 IIS 提供服务时 Fontawesome 不起作用

Fontawesome does not work when served by IIS

提问by Michal B.

FontAwesome does not work for me when I put my app on IIS7 server.

当我将我的应用程序放在 IIS7 服务器上时，FontAwesome 对我不起作用。

In Firefox the requested URL is encoded to http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3and I get 404. When I change %3Fto ?everything works fine.

在 Firefox 中，请求的 URL 被编码为http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3404。当我更改%3F为?一切正常时。

Same thing happens in IE, but the request goes to eot font.

同样的事情发生在 IE 中，但请求转到 eot 字体。

This is what I have in CSS (same as on FontAwesome page):

这是我在 CSS 中的内容（与 FontAwesome 页面上的相同）：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I think the problem is that IIS encodes the URLs and instead of requesting ../fonts/fontawesome-webfont.eot?the request goes to ../fonts/fontawesome-webfont.eot%3F.

我认为问题在于 IIS 对 URL 进行编码，而不是请求../fonts/fontawesome-webfont.eot?将请求转到../fonts/fontawesome-webfont.eot%3F.

Please do not suggest removing '?' or '#' from the URLs. They are there on purpose and are essential. The question is how to make IIS not to encode the URLs in that way. Any clues will be appreciated.

请不要建议删除“？” 或来自 URL 的“#”。他们是有目的的，是必不可少的。问题是如何使 IIS 不以这种方式对 URL 进行编码。任何线索将不胜感激。

Edit: Btw. the above situation takes place when in web.config I set requestValidationMode and requestPathInvalidCharacters:

编辑：顺便说一句。当我在 web.config 中设置 requestValidationMode 和 requestPathInvalidCharacters 时，就会发生上述情况：

<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" />

Without it I get 400 (Bad request): A potentially dangerous Request.Path value was detected from the client (?)

没有它，我得到 400（错误请求）： 从客户端检测到潜在危险的 Request.Path 值（？）

How can I fix IIS to serve the font properly?

如何修复 IIS 以正确提供字体？

Edit2: OK, I found the cause of the problem. SquishIt bundling tool for MVC3 was changing those characters. When I exclude font-awesome.css from the bundle everything works fine.

Edit2： 好的，我找到了问题的原因。MVC3 的 SquishIt 捆绑工具正在改变这些特征。当我从包中排除 font-awesome.css 时，一切正常。

采纳答案by Michal B.

SquishIt bundling tool for MVC3 was url-encoding the font paths, so ../fonts/fontawesome-webfont.eot?in css file was changed to ../fonts/fontawesome-webfont.eot%3F. This normally returns 400, because %3F is considered unsafe. If you set requestPathInvalidCharacters=""then %3F is considered safe, but there is obviously no file ``../fonts/fontawesome-webfont.eot%3F`, therefore 404.

MVC3 的 SquishIt 捆绑工具对字体路径进行了 url 编码，因此../fonts/fontawesome-webfont.eot?在 css 文件中更改为../fonts/fontawesome-webfont.eot%3F. 这通常会返回 400，因为 %3F 被认为是不安全的。如果你设置，requestPathInvalidCharacters=""那么 %3F 被认为是安全的，但显然没有文件``../fonts/fontawesome-webfont.eot%3F`，因此是 404。

I removed fontawesome.css from the bundle and everything works fine.

我从包中删除了 fontawesome.css，一切正常。

回答by Brad

Why is @font-face throwing a 404 error on woff files?

为什么@font-face 在 woff 文件上抛出 404 错误？

Add the MIME types in the web config:

在web 配置中添加 MIME 类型：

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>    
  </system.webServer>

回答by Stiger

You can open IIS, point to your website, In IIS session, select MIME Types. After Mime Types view showing, click Add-> In dialog:

您可以打开 IIS，指向您的网站，在IIS session 中，选择MIME Types。在 Mime Types 视图显示后，单击Add-> In dialog：

• File name extension: .woff
• MiME types: application/x-font-woff

• 文件扩展名：.woff
• MiME 类型：application/x-font-woff

click OK.

单击确定。

Done.

完毕。

回答by Rajshekar Reddy

This Answer is not for the above problemBut for those who face similar error but due to different reason and land up into this thread.

这个答案不是针对上述问题，而是针对那些面临类似错误但由于不同原因并进入此线程的人。

I faced similar problem but later found that IIS was trying to look for font-awesome woff,eot files in the folder MyIpAddress/fonts/fontawesome-webfont.woofbut I had the files in different folder. Moving the fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woffinto my fonts folder solved my problem

我遇到了类似的问题，但后来发现 IIS 试图在文件夹中查找字体很棒的 woff,eot 文件，MyIpAddress/fonts/fontawesome-webfont.woof但我将这些文件放在了不同的文件夹中。移动fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff到我的字体文件夹解决了我的问题

回答by Alexander Khorunzhiy

for me only adding the bootstrap CDN link solved the issue

对我来说只添加引导 CDN 链接就解决了这个问题

for your page:

为您的页面：

<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>

回答by dazunE

Playing with IIS sever is risky, instead of that I tried another trick which was 100% success.

使用 IIS 服务器是有风险的，相反，我尝试了另一个 100% 成功的技巧。

Step 1

第1步

Rename the font files names by adding .jpg at the end of the files.

通过在文件末尾添加 .jpg 来重命名字体文件名。

fontawesome-webfont.eot.jpg (likewise)

fontawesome-webfont.eot.jpg（同样）

Then Change the File types in fontawesome.css font rendering lines

然后更改 fontawesome.css 字体渲染行中的文件类型

 */@font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot.jpg?v=4.0.3'); src:url('../fonts/fontawesome-webfont.eot.jpg?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff.jpg?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf.jpg?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg.jpg?v=4.0.3#fontawesomeregular') format('svg');

回答by IvanJijon

If you are using CodeIgniter under IIS7 :

如果您在 IIS7 下使用 CodeIgniter：

In your web.config file, add woffto the pattern

在您的 web.config 文件中，将woff添加到模式中

<rule name="Rewrite CI Index"> <match url=".*" /> <conditions> <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" /> </conditions> <action type="Rewrite" url="index.php/{R:0}" /> </rule>

<rule name="Rewrite CI Index"> <match url=".*" /> <conditions> <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" /> </conditions> <action type="Rewrite" url="index.php/{R:0}" /> </rule>

Hope it helps !

希望能帮助到你 ！

回答by Gregory Way

I changed from woff2 to woff and it went on fine.

我从 woff2 改为 woff 并且一切顺利。

回答by Savage

If you're adding FontAwesome via bundling, it can throw out the woff2 url. See the following solution on a similar thread where CssRewriteUrlTransformis used to rework the url: https://stackoverflow.com/a/22700610/746984

如果您通过捆绑添加 FontAwesome，它可能会丢弃 woff2 url。请参阅CssRewriteUrlTransform用于返工 url的类似线程上的以下解决方案：https: //stackoverflow.com/a/22700610/746984

回答by Nag Akkena

Use this cdn in your index.html page...

在您的 index.html 页面中使用此 CDN...

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">