SNSアイコンのHTML・CSSテンプレ(Instagram・Facebook・Twitter・LINE)

サンプル

各SNS(Instagram・Facebook・Twitter・LINE)のアイコンは使う機会が多いと思うので、テンプレ化。

  • アイコンの色が変わる
  • アイコンの色が変わる(背景を白抜き)
    • 正方形で白抜き
    • 円で白抜き
  • アイコンの背景色が変わる
    • 背景が正方形
    • 背景が円

他のSNSアイコンなどにも使い回せるはず。

ただし、アイコンの形(四角い or 円形 or 他)と背景の形(正方形 or 円)の組み合わせによっては微妙にダサくなる場合もあるので注意。

Instagramアイコンの背景色(グラデーションのCSS)は以下のサイトより。

文具女子博|すべての文具好きに贈る日本最大級の文具の祭典

https://bungujoshi.com/

ソースコード

アイコンの色が変わる

HTML
CSS

アイコンの色が変わる(背景を白抜き)

HTML
CSS

アイコンの背景色が変わる

HTML
CSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です