web-dev-qa-db-ja.com

font-awesomeがlocalhostで機能するがWebでは機能しないのはなぜですか？

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

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

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

ありがとう

asp.net-mvcfont-awesome
53
ethelrsn

あなたのウェブページをロードし、firebugのnetタブを確認しました。

次の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>
68
AdamWhite

font-awesomeがデバッグモードで機能するのにIISでは機能しないのはなぜですか？

Visual Studioでは、デフォルトで、公開中に一部のフォントファイルが含まれません。

  • .eot
  • .json
  • .ttf
  • .woff

これは、build actionがNoneに設定されているためです。デフォルト（MVCでは、WebFormsでは不明）影響を受けるファイルのプロパティに移動し、「なし」から「コンテンツ」に設定する必要があります。

enter image description here

これは私がそれを解決した方法です（一部の人が示唆するようにファイルを手動でドラッグすることではありません）

クレジットはこの男に行きます： http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html

34
Yorro

私のためにこの問題を解決した別の解決策はここにあります： https://stackoverflow.com/a/12587256/615285

そこから引用：

問題は、CSSファイル内のアイコン/画像が相対パスを使用している可能性が高いため、バンドルがバンドルされていないCSSファイルと同じアプリ相対パスにない場合、リンクが壊れます。

簡単なことは、バンドルパスをcssディレクトリのように見せることで、相対URLが機能するようにすることです。

new StyleBundle("~/Static/Css/bootstrap/bundle")

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()));
9
Mason240

同じ問題がありました。ソリューション：

  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;
}

    （必要に応じてフォントフェイスの値を変更します）

  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. プロジェクトを公開する

8
Mr. Zoidberg

BundleConfigの次のコード行に依存します。

        BundleTable.EnableOptimizations = true;

正しい場合は、フォントファイルのパスを変更する必要があります。

../はroot path, main folder of your project。そして、残りのパスを記述する必要があります。

私の。本当の場合：

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;

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;
2
Ebleme

これは私のために働いた：<link href = "〜/ Content/font-awesome-4.2.0/css/font-awesome.css" rel = 'stylesheet' type = 'text/css' />

Directly URlをリンクする必要がありました

1
Michael Mora Montero

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

1
Bachask8

私にとって本当に役立つものはありませんでした。角度付きアプリケーションをホストするWebformページがあります。 angularアプリケーションはウェブフォントを使用します。

CssRewriteUrlTransform（）を使用したトリックは正しい方向でしたが、最終的な解決策となるバンドル用の拡張機能が見つかりました！

AspNetBundling

ホール拡張を使用する必要はありません。CssRewriteUrlTransformFixedクラスをコピーして、元のクラスの代わりに使用するだけです。

0
Franki1986

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の前に../を追加する必要がありました。

0
Leniel Maccaferri

同じ問題がありました。フォントはローカルで適切に表示されましたが、サーバーにアップロードすると、空白の四角だけが表示されました。
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; 
フォントスタイル：normal; 
} 
 

 font/fontawesome-webfont_2d2816fe.eot 
 font/fontawesome-webfont_aea8981c.eot 
 font/fontawesome-webfont_aea8981c.ttf 
 font/fontawesome-webfont_aea8981c.woff 
 

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

0
amit kumar

上記のすべての提案を試しましたが、どれも機能しません。次に、フォントCSSファイルを別のCSSファイルに移動しようとしましたが、魔法が起こりました。すべてが問題なく機能し始めます。バンドルファイルから新しいCSSファイルを後でバンドルできることに注意してください。

0
Bakir BIbezic