問題タブ [ionicons]

これらを使用したいRailsアプリがあります。指示に従って、.cssのフォントパスがassets/fonts/ioniconsであることを確認しました...しかし、機能していないようです。誰もこれらを以前に使用したことがありますか?

SASS (Compass) を使用して最初の Web サイトを作成しましたが、とても気に入っています。非常に便利なツールです。また、Font Awesome も追加し、かなり頻繁に使用しました。これは、Retina ディスプレイにも最適化し、グラフィックスの使用を減らしたいためです。

私が取り組んでいるプロジェクトでは、オンラインでのフィードバックとディスカッションを扱っているため、2 つのバーの背景として「+」と「-」記号を配置したいと思います: https://www.orat.io/stmt/42

これは「+」記号のコードです。

問題は、Safari (特に iOS) でアイコンの位置がおかしくなることです。いろいろパラメータを変えてみましたがだめでした。Chrome、Firefoxなどではすべて問題ありません。

任意のヒント？みんなありがとう

私は一日中調査しましたが、私のイオコンが IE と Firefox では表示されず、クロムでは正常に表示される理由についての答えが見つかりません。

私のサイトは Bootstrap 3 で構築されており、Ionicon CSS は他の CSS ファイルの後にヘッダーで呼び出されます。

IE (すべてのバージョン) と Firefox (すべてのバージョン) でサイトを起動すると、Ionicons が 2 行 2 文字ずつの小さな長方形として表示されます。

Firefox を使用している場合は、ソーシャル Ionicons があるはずのチーム セクションにエラーが表示されます。

誰がこれを引き起こしているのか考えていますか? このサイトからいくつかの解決策を試しましたが、成功しませんでした。

私はイオンフレームワークを使用しています。

次のコードを使用しています。

公式ドキュメントから直接取得したものです: http://ionicframework.com/docs/components/#input-icons。

全体的に比較的うまく機能しますが、標準の Android ブラウザーでは失敗します (物理的な HTC One X 4.0.4 および Genymotion Galaxy Nexus 4.3 でテスト済み)。

Weinreを使って要素を調べてみた

CSSを変更してみました：

:pseudo クラスがサポートされているかどうかを確認しました

http://caniuse.com/#feat=css-gencontent

それらが実際にサポートされていることを確認するために簡単なデモを作成しました（サポートされています）

http://plnkr.co/edit/o5BK6KqTk1MNrlMOI7o5?p=preview

そして、この段階で私は質問する権利があると感じています...アイコンを機能させるには何が必要ですか?

（どうもありがとう）

更新: http://bit.ly/aaaabbbccccアイコンはストック ブラウザーで動作します。コードで動作しない理由をまだ理解しようとしています...

更新: https://android.stackexchange.com/a/19816/59510 - ブラウザのキャッシュ/ローカル ストレージ/その他の設定を削除する方法を説明する便利なリンク

更新: http://1drv.ms/1fWdHpi - ビデオを録画しました...非常に多くの可能な状態で断続的です。

Cordova プロジェクトで使用しているアイコンの一部がどのデバイスにも表示されないことに気付きました。機能していないものには、アイコン名に ios または android という単語が含まれているようです (例:ion-android-list またはion-ios-book-outline)。空白で表示される理由はありますか? これまでのところ、一般的な名前で使用したアイコンはすべて正常に機能します (ion-clock、ion-card など)。ここから取得しているアイコン名: ionicons

これを index.html ファイルに含めました。

イオコン(SVG だと思います) に繰り返し色を変えてもらいたいです。次のことを試しましたが、svgアイコンが紫色でしか表示されません:

エレメント

CSS

タイトルの通り、プロジェクトでfollow要素を使用しましたが表示できません。

この問題を解決する方法がわかりません。誰かがこの問題を解決する方法を教えてくれたら、どうもありがとう。

今日、IonIcons を使用したときに奇妙な動作を発見しました。

本文に font-family プロパティがある場合、ベースライン (私は正しいですか? ベースラインですか?!) は大きくなります。

JSFiddle: http://jsfiddle.net/5awcxhnv/

本文から font-family プロパティを削除すると、サイズは完璧です。この行動の理由を知っていますか？

更新: http://psd-labs.com/demo/ - 青いボックスの中心を垂直に揃えたいと思います。を使っvertical-align:center;ていたのですが、本文のフォントのせいで動きません。フォントを削除すると、整列は完璧です。

カスタムswitchトグル (ここから) を使用しており、通常のテキストの代わりにアイコンを追加したいと考えています。Ioniconsコードを CSSプロパティに貼り付けるcontentと、四角形として表示されます (文字 \ フォントが見つからなかったという事実を示しています)。どうすればこれをパスできますか?

編集: 追加するのを忘れていました。CDN から CSS を含めました。

JSフィドル

CSS を切り替える:

HTML: