問題タブ [icon-fonts]

問題

これはかなり奇妙な問題です。私は Linux で Web サイトをデザインし、いくつかの CSS トランジションに回転を加えました。最終的にはこのようになります（見えるようにタップしました）。回転しているスピニングがそれ自体の軸であることがわかります。これは Firefox でキャプチャされましたが、Chrome と Opera でまったく同じように動作します。(それらすべての最新バージョン)

今、私がWindowsに行くと、これがFirefoxとChromeで表示されるものです（どちらも最新バージョンです）。もう軸を中心に回転しません。

中身は？

特に何もありません。クロスブラウザーにするためのいくつかの mixin を使用して、トランジショナル ローテーションに必要なだけです。このコードペンを作って見せたのですが、どこに問題があるのか​​本当にわかりません。

Windows/Linuxがこの違いをどのように説明できるかについて、誰かがより多くの知識を持っているかもしれません。ご覧のとおり、アイコンフォントを使用しています。Windows と Linux はどちらも、異なることが知られているタイプに対していくつかの最適化を実行します。これはひょっとして関係あるのでしょうか？

アイコンフォントは単なるフォントであり、クラス名を呼び出すだけでアイコンを取得できることは理解していますが、アイコンフォントはどのように機能しますか?

Chrome にロードされた関連するアイコン フォント リソースをチェックして、アイコン フォントがアイコンをどのように表示するか (一般的なフォントと比較して) を確認しようとしましたが、これがどのように発生するかを理解できませんでした。

また、利用可能なアイコン フォントがたくさんあるにも関わらず、この「アイコン フォント手法」がどのように行われるかについてのリソースを見つけることができませんでした。アイコンフォントを統合する方法を示すリソースもたくさんありますが 、これがどのように行われるかについて誰も共有したり書いたりしていないようです!

したがって、コンパスでのスプライトシートの生成は非常に優れています。ただし、ラスタライズされた画像は、いくつかの点で制限される可能性があります。十分な数のアイコンがあり、それらのアイコンフォントを作成し始めているので、さまざまな色とサイズにする必要があります。

誰かがsass/compass用のgemを作成して、svgファイルを取得し、コンパスにあるスプライトシート機能に似たハッシュフォントの束を出力したのではないかと思いました。オンラインで検索しても何も見つからなかったので、まだ存在していないのではないでしょうか。

次の質問は、SVGを取り出してフォントを作成する簡単な方法はありますか？自動化された方法でこのようなことを行うことができるツールがすでにそこにありますか？

私のサイトhttp://www.stefaanoyen.be (左の列)のフッターには、アイコン フォントであるソーシャル メディアのアイコンがいくつかあります。ホバーすると、円が赤く、その中のアイコンが白くなります。赤い円は機能しますが、その後ろに白い四角があります。白をアイコン/円の形状に制限するにはどうすればよいですか?

これは私の HTLM です:

そして、これは私のCSSです:

助けてくれてどうもありがとう！

ステファーン

Symbolset フォント (標準およびソーシャル) を数か月間使用しており、気に入っています。最近、私はIE8でいくつかの問題に気づいています。私がやっているいくつかのサイトは、IE8 ではまったく読み込まれません。下部のソーシャル バーにこれがあります: http://cl.ly/image/3y1o2R2X2L1t、これは Symbolset ファイルに関係していると思います。私は一生、問題が何であるかを理解することはできません。問題を引き起こしている可能性のあるアイデアや、私が見逃している可能性のあるものはありますか?

ありがとう！

バックグラウンド

私は現在、Web フォント、特にアイコン フォントを使って多くの作業を行っています。テスト目的で特定のアイコンがどの文字であるかを確認する必要があるため、文字を入力したり、コピーして貼り付けたりするだけです。

例

ほとんどのアイコン フォントの CSS は似ており、:before 疑似アプローチを使用します。

質問

• このエンコーディングは CSS 文字 (Hex) と呼ばれていると思いますが、これは正しいですか?
• エスケープされた CSS 文字値を入力して、コピーして貼り付けることができる値に変換できるツールはありますか
• これを HTML の 10 進数値に変換できるツールはありますか。たとえば & = シンプルなアンパスタンド

概要

キーボードで簡単に入力できるように、それがどの文字であるかを見つけたいと思います。私は何年もかけて調べてきましたが、このタイプのエンコーディングと変換が何と呼ばれているのかよくわからないので、探しているものを見つけることができません. いくつかの指針をいただければ幸いです。

私は現在、完全に正常に動作するレスポンシブ トグル ナビゲーション メニューを持っています。私が抱えている問題は、ナビゲーションアイコンにあります。開いた状態と閉じた状態の両方にアイコンフォントを使用しようとしています。現在、私のHTMLは次のとおりです。

表示されるアイコンは、開いている (3 本の線) アイコンです。別のアイコン フォントを使用して、閉じた状態の代わりに誰を使用できるかを理解するのに苦労していますか?

リンクの現在のCSSは次のとおりです。

}

}

私はif文を使用することになっていると思いますか？しかし、マークアップやCSSによる解決策はありますか? そうでない場合は、JS ソリューションが役立ちます。乾杯！

アイコン フォント アイコン (Font Awesome など) を Google マップ V3 のマーカーとして使用して、デフォルトのマーカーを置き換えることができるかどうか疑問に思っていました。それらを HTML または PHP ドキュメントに表示/挿入するには、マーカーのコードは次のようになります。