問題タブ [icon-fonts]

sencha Architect プロジェクトにカスタム フォント アイコンを追加し、不要なテーマ クラスを削除しようとしていますが、Sencha Architect は app.scss をまったく使用していないようです (私のプロジェクトの resources/sass フォルダーにあります)。私が行った変更は、アーキテクトにもアプリの起動時にも適用されません。

app.scss

言及しておくと、scss ファイルを css にコンパイルしたところ、問題なくコンパイルされました。

誰か詳しく教えてください。

私は使っている：

• Sencha アーキテクト 3.0.2.1375
• コマンド: 4.0.2.67
• フレームワーク: Sencha Touch 2.3.x

アップデート：

Architect は app.scss ファイルをテーマの理由で使用していないことがわかりました (Phill の投稿を参照)。アイコンフォントを挿入しようとすると、別の問題が発生しました。フォント ファイルが見つかりませんでした。理由は次の投稿に記載されています: http://www.sencha.com/forum/showthread.php?280895-How-to-correct-the-Font-theming-in-Architect3

次のコードで問題が解決され、新しいアイコン フォントを問題なく使用できるようになりました。

明確にする。Architect のテーマ (scss リソース) にファイルを追加し、前述のコードを追加しました。

サイトで使用するアイコン フォント ルールをいくつか作成しています。Sass を使用して、すべてのアイコンをリスト変数にリストし、@each を使用してそれらすべてをループ処理したいと考えました。

コードは次のようになります。

問題はcontent:行のバックスラッシュです。文字エンコーディングに必要ですが、変数補間をエスケープし、次のような CSS を出力します。

次のようにバックスラッシュをもう 1 つ追加すると、次のcontent: "\\#{nth($icon, 2)}";CSS が出力されます。

変数補間を維持しながら、バックスラッシュを 1 つだけ使用して Sass に CSS を出力させる方法はありますか?

ブートストラップ 3 と glyphicons (PRO バージョンですが、ほとんど同じですが、いくつかのアイコンが追加されています) をフォントとして使用しています。

コンテキスト内の 1 つのサンプル コード:

それはうまくいきます。ホバー時の色の変更を追加したいのですが、いくつかの不具合があります。場合によっては (ただし常にではありません)、アイコンの側面 (スパン ボックスの外側の部分) の色が正しく変更されないことがあります。マウスオーバーで失敗することもあれば、マウスアウトで元の色に戻ることもあります。 〜1秒後に修正されます。

マウスオーバーに失敗しました:

マウスアウトに失敗しました:

注:文字間隔を 1.1em 以上に変更すると、アイコンの右側の問題は修正されたように見えますが、左側の問題を修正する方法が見つかりません。

エラーのデモ: http://www.bootply.com/116686

これは私が直面してきた奇妙な癖です。これはレスポンシブ デザインであるため、最大幅 600 ピクセルのメディア クエリが適用された後、IE がコードを正しく適用しないようです。画像でわかるように、残りのすべてのブラウザーはこれを正しくレンダリングします。これは、すべての最新の IE バージョンに影響を与えています。IE9、IE10、および IE11 で確認しました。

誰かが同じ問題を抱えていましたか？それは私にとって謎です... IEの謎です！私はこのブラウザが「大好き」です...

HTML:

CSS:

その他のブラウザ:

IE9+:

Fontelloには、カスタム フォントをドラッグできる領域があります。 ここの GitHub スタイル ページは、その fontello で使用したいカスタム フォントを持っていることを示しています。

クライアントが Web アプリのインデックス ページのヘッダー ロゴとして配信したアイコン フォントの大きなアイコンを使用しています。ロゴは、デバイスの幅の 60% の大きさで、大きな丸いロゴ (アイコンの約 40%) で構成され、その下に縦向きモードでデバイスの 60% の幅のテキストが表示されます。

顧客は、ブランドの CI が要求するとおりのテキストを望んでいるため、テキスト付きのロゴを 1 つのベクター アイコン フォント アイコンとして取得しました。

デスクトップ プレビューと私の google nexus 4 Dolphin Browser では問題ないように見えますが、chrome (nexus 上) ではスローガンが「Slogan is h」のように途切れています。ランドスケープに切り替えると、再び正しく表示されます。

Foundation 5 と iconmoon のカスタム バージョンを使用しています。すべての画像は NDA に拘束されているため、デモをお見せすることはできません。

私はここで途方に暮れています、なぜこれが起こるのか分かりますか?

上記のこのページ ( http://www.jungledragon.org/apps/jd3/all/recent ) を Android 版 Firefox バージョン 28 でレンダリングしたものをご覧ください。問題はすぐにわかります。これらの醜いブロックはすべて、アイコンフォント「FontAwesome」。

これは、それらがレンダリングされない唯一のブラウザーです。Android 版 Firefox から FontAwesome Web サイトにアクセスすると、そこにあるアイコンが問題なくレンダリングされるため、問題は私のセットアップのどこかにあります。もう 1 つの有用な手がかりは、「JungleDragon」のロゴが問題なくレンダリングされることです。これは、Google から提供されている Web フォントです。

この失敗の考えられる理由を除外しようとしています。これにより、いくつかの試み：

Amazon S3 アカウントで FontAwesome のコピーをホストし、そこに CORS ポリシーを設定してクロスオリジンリクエストを許可していました。これが原因ではないことを確認するために、現在、同じドメインでフォントをホストしています。違いはありません。

次に、フォントへの相対パスから絶対パスに変更しました。これも大差ありません。

このサイトは、次のコンテンツ タイプを追加した Apache でホストされています。

この最後の行は以前は異なっていましたが、レンダリングする Google フォントのコンテンツ タイプと完全に一致するように変更しました。これも大差ありません。

すべての試行で、毎回キャッシュを完全にクリアしたので、それも問題ありません。

このフォントは、他の Android ブラウザー (Chrome、Dolphin) だけでなく、Firefox を含む、私が知っているすべてのデスクトップ ブラウザーでも問題なくレンダリングされることに注意してください。

これが私のフォント宣言です：

これは、FontAwesome をロードするデフォルトの方法です。多くのバリエーション（SVGを最初にロードするなど）を変更しましたが、すべて役に立ちませんでした。

このフォントを Firefox for Android でレンダリングできない理由について、私は今、完全に途方に暮れています。