web-dev-qa-db-ja.com

glyphicons-halflings-regular.woff2に関するエラーを取り除く方法

ASP.NET MVC4 Bootstrap 3アプリケーションは、Web IDE用のMicrosoft Visual Studio Express 2013から実行されています。

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ディレクトリにあります。ビルドアクションは「コンテンツ」に設定され、出力ディレクトリにコピーは「他のフォントファイルのようにコピーしない」です。ブートストラップ3はNuGetを使用してソリューションに追加されます。このエラーが発生しないようにこれを修正する方法？アプリケーションは、GlyphiconとFontAwesomeのアイコンを正しく表示します。このエラーは常にアプリケーションの起動時に発生します。

asp.net-mvctwitter-bootstrapvisual-studioasp.net-mvc-4glyphicons
91
Andrus

この問題は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ボタンをダブルクリックしてください：

Step 1

ステップ2：AddメニューからActionsボタンをクリックします。 Step 2

ステップ3：画面の中央にウィンドウが表示されます。このウィンドウには、解決策1の2行を追加する必要があります。 Step 3

231
TotPeRo

私の場合は、足りないファイルをここから直接ダウンロードしました。 https://github.com/twbs/bootstrap/blob/master/dist/fonts/glyphicons-halflings-regular.woff2

41
Reza Mamun

Htmlにしかアクセスできない場合は、これをhtmlに追加してください。

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

私は上のすべての提案を試みたが、私の実際の問題は私のアプリケーションがapp/fontsで/ fontフォルダとその内容（.woffなど）を探していたが、私の/ fontsフォルダは/ appと同じレベルにあった。 /フォントを/ appの下に移動しましたが、現在は正常に動作しています。私はこれが他の誰かが答えを求めてウェブをローミングするのを助けることを願っています。

3
cirl

私にとっては、問題は2つありました。まず、私が扱っていたIISのバージョンは、.woff2 MIMEタイプを知りませんでした。.woffについてだけでした。 Webアプリケーションレベルではなく、サーバーレベルでIIS Managerを使用するように修正したため、設定が新しい各アプリケーションの展開で上書きされることはありません。 （IIS Managerの下で、私はMIMEタイプに行き、欠けている.woff2を追加し、そして.woffを更新しました。）

第二に、そしてさらに重要なことに、私はbootstrap.cssを他のファイルと一緒に"~/bundles/css/site"としてバンドルしていました。その間、私のフォントファイルは"~/fonts"にありました。 bootstrap.cssは"../fonts"のグリフフォントを探します。これは"~/bundles/fonts" - 間違ったパスに変換されます。

言い換えれば、私のバンドルパスは1つのディレクトリが深すぎたのです。私はそれを"~/bundles/siteCss"に改名し、そして私のプロジェクトで見つけたそれへのすべての参照を更新しました。ブートストラップは"~/fonts"でグリフファイルを探しましたが、これはうまくいきました。問題が解決しました。

上記の2番目の問題を修正する前は、noneglyphiconフォントファイルが読み込まれていました。症状は、プロジェクト内のglyphiconグリフのすべてのインスタンスが空のボックスを表示しているだけだったことです。ただし、この症状は、デプロイされたバージョンのWebアプリケーションでのみ発生し、私の開発用コンピュータでは発生しませんでした。なぜそうなったのか、私にはまだわかりません。

3
Stephen G Tuggy

この問題は、IISがwoff2ファイルのMIMEタイプの実際の場所を見つけられないために発生します。font-faceのURLを適切に設定し、次に示すようにfont-familyも保持します。

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