如何删除没有找到关于glyphicons-halflings-regular.woff2的错误

Question

ASP.NET MVC4 Bootstrap 3应用程序从Microsoft Visual Studio Express 2013 for Web IDE运行。

Chrome控制台始终显示错误

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

此文件存在于解决方案资源管理器的fonts目录中。构建操作设置为＆＃34;内容＆＃34;和复制到输出目录是＆＃34;不要像其他字体文件那样复制＆＃34;。 使用NuGet将Bootstrap 3添加到解决方案中。 如何解决这个问题，以免发生此错误？ 应用程序正确显示Glyphicon和FontAwesome图标。应用程序启动时始终会发生此错误。

Answer 1

发生此问题是因为IIS不了解woff和。{  woff2个文件mime类型。

解决方案1：

在web.config项目中添加以下行：

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

解决方案2：

在IIS项目页面上：

第1步：转到项目IIS主页，然后双击MIME Types按钮：

第2步：点击Add菜单中的Actions按钮：

第3步：在屏幕中间出现一个窗口，在此窗口中需要添加解决方案1中的两行：

Answer 2

就我而言，我刚从这里直接下载了丢失的文件：https://github.com/twbs/bootstrap/blob/master/dist/fonts/glyphicons-halflings-regular.woff2

Answer 3

如果您只能访问html：

，请将此视频添加到您的html中

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Answer 4

我尝试了上面的所有建议，但我的实际问题是我的应用程序在app / fonts中查找/ font文件夹及其内容（.woff等），但我的/ fonts文件夹与/应用程序。我在/ app下移动/字体，现在工作正常。我希望这有助于其他人漫游网络寻求答案。

Answer 5

对我来说，问题是双重的：首先，我正在处理的IIS版本不知道.woff2 MIME类型，而只知道.woff。我修复了在服务器级别而不是Web应用程序级别使用IIS管理器的问题，因此该设置不会在每次新的应用程序部署中被覆盖。 （在IIS管理器下，我转到MIME类型，并添加了缺少的.woff2，然后更新了.woff。）

第二，更重要的是，我将bootstrap.css与其他文件捆绑为"~/bundles/css/site"。同时，我的字体文件位于"~/fonts"中。 bootstrap.css在"../fonts"中查找glyphicon字体，该字体被转换为"~/bundles/fonts" –错误的路径。

换句话说，我的捆绑包路径是一个目录太深。我将其重命名为"~/bundles/siteCss"，并更新了在项目中找到的所有对它的引用。现在，引导程序在"~/fonts"中查找了glyphicon文件，该文件有效。问题解决了。

在解决以上第二个问题之前，无个glyphicon字体文件正在加载。症状是项目中glyphicon字形的所有实例都显示一个空框。但是，此症状仅出现在Web应用程序的已部署版本中，而不出现在我的开发机上。我仍然不确定为什么会这样。

Answer 6

发生此问题的原因是IIS找不到woff2文件mime类型的实际 位置。正确设置font-face的URL，并在CSS文件中将font-family保持为 glyphicons-halflings-regular ，如下所示。

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}