2017-02-16 3 views
0

1)私は、擬似セレクタ(前と後)と "内容"を使ってフォントアイコンを使うことができると知っていますが、パッディング、左、上などにさまざまな変更を加える必要があるためフォントアイコンを背景イメージとして使用するにはどうすればよいですか?

2)データURIを使用すると、svgは正常ですが、異なるアクションに基づいてsvg の塗りつぶし/色を変更する必要があります。私はfillプロパティを試しましたが、実際には動作しません。

私は/変更する外部の色を編集しますが、私はバリエーションがたくさんあるし、再び


アイコンフォント(例:FontAwesome)はスケールしないことができますブラウザのSVGファイルが付属しています。何らかの形でそのファイルをCSS(画像スプライトなど)で使用することは可能ですか?

+1

偽要素トリックは超柔軟です。なぜあなたはそれを使うことができないのか分かりません。 –

答えて

1

SVGのプロパティを変更する場合は、インラインで配置する必要があります。したがって、背景としてSVGを使用すると、プロパティを変更するおよびは機能しません。

FontAwesomeのような図書館はfontで、svgではなく、背景として設定することはできません。

擬似セレクタ:beforeと:afterの使用に関する問題はありません。彼らは私の意見では非常にスケーラブルです。

あなたが本当にやりたければ、コードの一部を私たちと共有して、あなたがしようとしていることをよりよく理解できるようにしてください。

+0

左または右のフォームフィールド内にアイコンを配置したいと考えています。私は入力の大きさとして多くのバリエーションを持っていますが、状態(左またはライトの場所を定義する)といつでもです。 は親要素とアイコン要素を追加する必要がありますこれをCSSの多くのバリエーションと組み合わせると(パディング、マージンなど)、私は多くの作業をしています。それらを入力要素だけでバックグラウンド(クラスの追加または削除)として使用すると、あまり集中的でなく、コードが少なくなり、スケーラビリティが向上します。 – user3541631

+0

あなたができることは、入力要素と背景を持つdivを含む入力グループdivを作成することです。次に、バックグラウンド要素.input-group .background-elementを選択し、絶対値を入力に配置します。または入力+。バックグラウンド要素 –

+0

でそれを選択してください、ありがとう、私はそれを試してみます – user3541631

関連する問題