4

IIS8 で新しい (シンプルな) Web サイトを作成しました。簡単なIndex.htmlを作成し、jQuery、Bootstrap3、Font-Awesome 4.0.0 を入れて遊んでみました。

ただし、Font-Awesome アイコンは何も表示されません (四角形):

デモ画像

私のフォルダ構造は

/
  - Index.html
  - bootstrap.css
  - bootstrap.js
  - jquery-2.0.3.js
  /css
    - font-awesome.css
  /fonts
    - FontAwesome.otf
    - fontawesome-webfont.eot
    - fontawesome-webfont.svg
    - fontawesome-webfont.ttf
    - fontawesome-webfont.woff

私のHTMLコード:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Site</title>

    <link rel="stylesheet" type="text/css" href="bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="slate.css" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
</head>

<body>
    <div class="container">
        <h1>This is a test</h1>
        <h1>User Icon: <span class="fa-user"></span></h1>
    </div>

    <script type="text/javascript" src="jquery-2.0.3.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</body>

</html>

Font-Awesome @font-face は:

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

Chromeは、.woffファイル（または何も）がダウンロードされていないことを示しています（ 404もありません）

Chrome ネットワーク

私はもう試した

  • IE 11、Firefox、Chrome
  • サイトをライブサーバーに置く
  • .woff の MIME タイプを
    • font/x-woff
    • application/x-font-woff
    • application/font-woff
    • font/woff
  • アプリケーション プールへの完全な読み取り権限
  • @font-face の url() を から に変更../fonts/するfonts/
  • その他の不要な css および js ファイルをすべて削除する
  • ページ全体の更新、キャッシュのクリア
4

5 に答える 5

2

空白の四角の問題がありましたが、これは私のマークアップの問題ではありませんでした。faアイコンが配置されているのと同じIDを使用するソーシャルコメントプラグインでワードプレスを使用しており、プラグインcssがfont-familyを上書きしました。したがって、クラスが正しい場合は、他のクラスがフォント ファミリをハイジャックしていないことを確認してください。

于 2014-02-12T23:34:26.313 に答える
0

マイクの回答の助けを借りて、アイコンが四角で表示される同様の問題を修正しました。FontAwesome の別のインスタンスが読み込まれていて、これが問題を引き起こしていることがわかりました。「Font Awesome Free 5」の代わりに「FontAwesome」フォント ファミリを適用すると、問題が修正されます。具体的には、Wordpress で Avada テーマを使用して WooCommerce Product Search を実行しているときに問題が発生しました。

于 2018-07-26T11:36:08.803 に答える