[HTML/CSS]filter:invertでアイコンの色を変える。

アイコンの色を白から黒に変えたい。

アイコンの色を場所によって変えたり、ホバーした時に変える実装はよくあります。

今回は色を変える時によく使う、filter:brightnessでアイコンの色を白から黒に変えます。

実装例

下記が実装例です。
Resultタグで、メールアイコンをホバーしたら色が黒になります。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

解説

①HTML
SVGアイコンでメールを実装しています。

<div class="icon-container">
  <svg class="icon icon-mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M4 4h16v16H4z" fill="none"/>
    <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/>
  </svg>
</div>

②CSS

/* ホバー時に色を反転 (白 → 黒) */
.icon:hover {
  filter: invert(1);
}

invert(1)は、色を反転できます。
白色のアイコンなので、黒に変化します。

まとめ

以上今回は、アイコンの色を白から黒に変える方法について解説しました。

filter: invert(1);で簡単に色を反転できるのでおすすめです。

もしも質問などあれば、コメント欄かXのDMよりお気軽にご連絡ください。

Tweets by yuhi1321