2

Android 版 Chrome の次のページで、My Font-Awesome アイコンが正しくレンダリングされません。

http://nylen.tv/public/chrome-issue.html

各td.description要素 (ZZZZZ 行) の最後には、1 つまたは 2 つの Font-Awesome アイコンがあります。私の Galaxy Nexus では、ページが縦向きモードで読み込まれている場合、これらは表示されません。ページが横向きモードで読み込まれている場合は表示されますが、電話を縦向きモードにすると消えます。Nexus 7 でも同様の問題が発生します。

マークアップに問題はないと思います。私が試した他のすべてのブラウザで動作し、HTML と CSS は、Font-Awesome のベンダー プレフィックス付きの CSS プロパティを除いて検証されます。

誰もこのようなものを見たことがありますか？回避策はありますか？

4

2 に答える 2

0

デスクトップのChromeでも同様の問題が発生していました。アイコンの代わりに、垂直の長方形がその場所にレンダリングされていました。

他の場所では、サイト独自のスタイルシートで、高さと幅を 1em に設定し、display を :block に設定することをお勧めします...

i {
  width: 1em;
  height: 1em;
  display:block;
  cursor: pointer;
}

しかし、font-awesome.min.css で相対フォント パスを正しく設定していないことが問題であることがわかりました。

[http://fortawesome.github.com/Font-Awesome/#integration][1]

また、各 URL の前に「src」タグが付いていることも確認してください...

@font-face{
  font-family:'FontAwesome';
  src:url('../font/fontawesome-webfont.eot?v=3.0.1');
  src:url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype');
  src:url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff');
  src:url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }
于 2013-03-07T23:00:44.830 に答える