アイコンの色を変更する方法

QQ アイコンを例に見てみましょう

1. 赤とグレーの QQ アイコンを PNG 画像に配置し、background-position と over:hidden でアイコンの表示を制御します。

2. QQ アイコンをフォントにし、font-face を通じてフォントを参照します。たとえば、QQ アイコンは文字 A に対応しており、次のように使用できます。私のフォントの色:赤"> ;A

3. svg フィルターを使用して QQ 画像に色を付けます。以下は svg フィルターです。

リーリー

コードを表示

この SVG をローカル フォルダーに保存し、filter-test.svg という名前を付けます。アイコンの色を変更したい場合は、次のコードを CSS に追加するのが非常に簡単です。 a)--- ----------------注: 私の SVG には ID a のフィルターが 1 つだけあります。

要約すると、最初の方法はデザイナーにとって面倒、アイコン画像が非常に大きくなり、CSS 制御が面倒、アトラスの場合はディスプレイスメントを計算する必要がある、などです。 3 番目の方法は、アイコンにスタイルを追加するために、SVG フィルター セットを作成し、それをフィルターを通じて適用するだけで済み、使用するリソースが少なく、ブラウザーがサポートしている限り互換性があります。 SVGとフィルター。

以上です。個人的には、最後の方法が前の方法に徐々に置き換わると思います。これは、再利用および共有のためにオンラインに吊るすことができるフィルターだからです。