どうも7noteです。cssだけで1枚のアイコン画像を好きな色に変える方法（IE対応）

画像の書き出し方をちょっと工夫することで、1枚のアイコン画像の色をCSSだけで自由に変更できる方法があります。

簡単2ステップ

ステップ1

画像を書き出す時に、アイコンの形をそのまま画像として書き出さずに・・・

『アイコンの形をくり抜いた画像を書き出します!!』

こういう画像ではなくて、

真ん中が透明になります。（分かりやすいよう少し色を変えてます）

ステップ2
この画像を任意の場所に設置して、CSSでimgに好きな背景色を入れます。

<img src="heart.png" alt="ハート" class="heart">

.heart {
  background: #fdb126;
}

結果

まとめ

画像編集ツール（フォトショップ等）が必要ですが、全ブラウザ対応かつ簡単なのが魅力的。
linear-gradientを使えば単色だけでなくグラデーションにも対応できます。

※背景色が違う色に変わる時は画像を作り直さなければいけなくなるので注意！

はたまたjsでアニメーションを入れればカラフルに色が変わるようなことも可能に。

おそまつ！