問題タブ [fontello]

カスタム アイコン フォントを IE 8 で動作させるために 1 日中試してきました (たとえば、FontelloやIcomoonを使用)。

Fontello と Icomoon の両方で、ダウンロード後にアイコン フォントの「デモ」ページが提供されます。デモページを使用してテストしています。

プラットフォームに関しては、ModernIE の WinXP VM で IE8 を使用しています。

私が経験している問題は、50 ～ 90% の確率でフォントが正常に読み込まれることです。残りの時間は読み込みに失敗し、fontello を使用している場合はあるべき場所に空白スペースができ、icomoon を使用している場合はあるべき場所にボックスができます。

インターネット上のどこかに記載されているすべての修正を試したかのように感じます。

私は夢中になっていますか？ページが読み込まれるたびにアイコン フォントを IE 8 で動作させることはできませんか? 散発的な読み込みで解決する必要がありますか?

エラーを再現するには、icomoon または fontello から任意のカスタム フォントをダウンロードし、ModernIE の WinXP VM 上の IE8 で使用します (前述のとおり)。他の構成 (Win7 上の IE8 など) について話すことはできませんが、それらは同じになると思います。

fontawesome アイコンがプリインストールされている Wordpress テーマ (Avada) を使用しています。私の顧客は、http://fontello.com/ の lineicons を使用したいと考えています。彼は .zip ファイルをダウンロードして私に送ってくれました。これが私がしたことです：

1) -zip ファイルを解凍し、次のファイルを取得しました: - css フォルダー - font フォルダー - config.json - demo.html - README.txt

2) CSS フォルダー内のすべてを次の場所にアップロードしました: /wp-content/themes/Avada/css

3) フォントフォルダー内のすべてを次の場所にアップロードしました: /wp-content/themes/Avada/fonts/fontello/

4) /wp-content/themes/Avada/css/fpslineicons.css を開き、@font-face を次のパスに設定します。

その後、管理パネルに移動し、フロントページのテキスト モードに次のコードを入力しました。

私も試しました：

何だと思う？何も表示されません。誰かが私が間違っていることを教えてもらえますか? 何が悪いのかわかりません。

ありがとう、クリス

問題

<a>fontello.com の font-icon を適用したタグは、Web ページ上で次のようにレンダリングされますが、左矢印または右矢印である必要があります。

バックグラウンド

fontello.comのフォントを使用するためのチュートリアルとして、この回答の最初の 4 つのポイントを使用しました。5番目のポイント（タグ部分）は完全には理解できませんが、これもオプションです。<i>

.........

要素にスタンドアロンの（つまり、テキストを含まない）グリフアイコンが必要な<a>ので、これを行いました：

と

そして、この<a>要素の CSS では:

.........

fontello.com からダウンロードしたフォルダーのarrows.cssファイルは次のとおりです。CSS

編集@Pauli_D

はい、私はそれらを持っています。小さなデモ プロジェクトを作成しました( JSFiddle に fontello を追加する方法がわからないため、ここにコードを投稿します)。

index.php:

スタイル.css:

arrows.cssは上と同じ

…………

fontello を使用して、以下のように共有アイコンを表示しています。誰かがクリックした場合に記録されるように、Google アナリティクスを追加しようとしています。現在、取得できるのは空の値だけです。私のGAコードは以下です。Facebook、Twitter、またはInstagramのアイコンをクリックしたかどうかを記録するように修正するにはどうすればよいですか?

fontello からカスタム アイコンのリストを生成し、2 つの make 2 アイコンをスタックする必要がありました (2 つの異なる色が必要だったため)。

もともと、私はそれを相対位置にあるコンテナにラップし、2 つのアイコンを絶対位置にある独自のオブジェクトとして使用していました。彼らはAngularコードのリストを変更する必要があります。

そこで、:before と :after を使用することを考えていました。例えば：

ただし、前に入力した同じコードは機能しますが、疑似クラスを :after に変更すると、ページに大きな四角形が表示されて壊れてしまいます。その理由がわかりません。

誰かヒントを教えてくれませんか？

アイコンフォント初心者です。

fontawesome は特に (私の観点から) fa-stack、fa-2x、fa-rotate-# などのクラスで使用可能なアイコンが増えるため、非常に優れています。

フォンテロも最高です。特に（これも私の観点から）より多くのアイコンを見つけることができ、本当に必要なものだけを使用できるからです。ただし、fontello によって生成された css には、すばらしい fontawesome ユーティリティがすべて含まれているわけではありません。

質問は次のとおりです。fontello で取得したアイコンで fa-xxx ユーティリティを使用できますか? または、fontawesome css を含めて、それを fontello アイコンに正常に適用できますか? あるいは、fa-xxx ユーティリティを fontello.css に移植することは可能ですか?

アップデート：

私はこのシナリオをテストしました: fontawesome css をインポートし、fontello アイコンに適用します。これは Google Chrome v43 での結果です。

• fontello と font-awesome のアイコンが混在する fa-stack は機能しているようです (垂直方向のセンタリングは完璧ではないかもしれませんが、それでも問題ありません)。
• fa-2x が動作する
• fa-flip-xxx と fa-rotate-xxx が機能しない
• fa-spin と fa-pulse が機能する
• fa-border ドゥ ワーク

これがすべてのブラウザー/プラットフォームに当てはまるかどうかはわかりません。反転と回転が機能しない理由がわかりません。

次のステップでは、fontello アイコン フォントのみを使用するために、fontawesome クラスを fontello-codes.css に含めようとする可能性があります ( --> 小さいアイコン フォント)。