58

私は自分のプロジェクトで素晴らしいフォントを使用しています(mvc/asp.net)。私の問題は、プロジェクトをデバッグしてチェックしてlocalhostいたことです。フォントの素晴らしいアイコンに問題はありませんでした。しかし、ウェブサイトを公開してウェブで確認すると、アイコンの代わりに小さなボックスが表示されました。css正しいディレクトリ（ファイルが配置されている場所）に配置されていると確信しています。

適切な解決策が見つかりませんでした。

ちなみにボタン類も問題ありません。それらはすべて問題ありませんが、アイコンはなくなりました。

ありがとう

4

11 に答える 11

72

あなたのウェブページをロードして、firebugのネットタブをチェックしました。

次のURLは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>
于 2013-02-16T10:55:45.653 に答える
8

私も同じ問題を抱えていました。ソリューション：

  1. 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 の値を変更します)

  2. ttf フォント ファイルをデスクトップにコピーし、 eot に変換します。

    http://www.kirsle.net/wizards/ttf2eot.cgi

  3. ttf フォント ファイルを svg に変換する

    http://www.freefontconverter.com/

  4. ttf フォント ファイルを woff に変換します (オプション)

    http://ttf2woff.com/

  5. Visual Studio 2012 が開いているときに、これらすべてのフォント (ttf、eot、svg、woff...) をファイルの場所にドラッグ アンド ドロップします。

  6. プロジェクトを公開する

于 2013-04-20T14:47:26.843 に答える
1

これは IIS の MIME タイプの問題でもあります。ファイル拡張子 .woff を追加するだけで機能します。

于 2015-09-22T16:57:46.123 に答える
0

BundleConfig.cs でバンドルを有効にした ASP.NET MVC プロジェクトでは、次のように機能しました。

ファイル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。

于 2014-01-23T14:39:59.453 に答える
0

私も同じ問題を抱えていました。フォントはローカルでは適切に表示されましたが、サーバーにアップロードすると、空白の四角しか表示されませんでした。
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/fontawesome-webfont_2d2816fe.eot
        font/fontawesome-webfont_aea8981c.eot
        font/fontawesome-webfont_aea8981c.ttf
        font/fontawesome-webfont_aea8981c.woff

アンダースコアの後のcssファイルで名前が正しく一致しませんでしたが、ローカルでは正常に機能していました。そのため、その考えられる原因が何であるかを判断するのは困難でした。
FontAwesome css file src のファイル名を正確な実際の名前に編集すると、機能しました。

于 2015-09-17T09:45:12.030 に答える