Font Awesome 4.1.0 が Cordova Android エミュレータで動作しない

StackOverflow https://stackoverflow.com//questions/25022589

質問

私の Cordova アプリに Font Awesome アイコンが表示されない理由がわかりません。

font-awesome フォルダー全体をダウンロードし、プロジェクトのフォルダーにコピーしました。次のフォルダーを含めました。

<link rel="stylesheet" href="../font-awesome-4.1.0/css/font-awesome.min.css">

これが正しいと確信しています。 <i class="fa fa-bars fa-2x"></i> クロムでは完全に問題なく表示されます。

しかし、走るときは cordova emulate android Androidエミュレータにアイコンが表示されません。

次に、ここでのトラブルシューティングに従ってみました。 https://github.com/FortAwesome/Font-Awesome/wiki/トラブルシューティング

トラブルシューティングでは、これは次のエラーであると考えられているようです。 text-rendering, 、しかし追加すると text-rendering: auto; に .fa { } 縮小された CSS と完全な CSS の両方で、Android エミュレータにアイコンが表示されません。

どうしたらいいのか迷ってしまいます。私の Android ターゲット プロジェクトは 4.4.2 API レベル 19 です。誰か助けてくれませんか？

アイコンに関連する HTML セクションは次のとおりです。

<body> 
    <div id="main">
           <div id="top">
               <i id="settings" class="fa fa-bars fa-2x"></i>
               <p id="logo" > Chowza Inc </p>
          </div>
    </div>
...
</body>
役に立ちましたか？

解決 2

私自身の質問に答える...

FontAwesome フォルダーをプロジェクト フォルダーにコピーしましたが、 cordova emulate android Font Awesome フォルダーが構築されていませんでした。FontAwesome フォルダーを CSS フォルダーにコピーし、関連するリンク パスを変更すると、この問題は修正されました。

他のヒント

Android 4.0.3 Cordova アプリでも同じ問題が発生しました。私の場合、URL からバージョンパラメータ (v=4.1.0) を削除する必要がありました。例えば：

font-awesome.css の古いブロック

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

font-awesome.css の新しいブロック

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top