CSSで作るSNSアイコン の構造  [ FontAwesome 5 ]

CSSでSNSアイコン作るのに夢中になった時期が昔ありました.

結構みなさん作られていて、すごいなぁと思いました !

気になったのは、インスタグラムのcss実装です. 
ガチのあのインスタグラムのようなアイコンをcssで作るには、すこし頭が痛くなります.

今回、インスタグラムアイコンをcssで再現してみたので、どのような構造になっているのか見ていきたいと思います. (グラデーションの数値などは見た目雰囲気なのでそこは勘弁してください)

※もちろん、コピペでオッケーという方はそれはそれでいいと思います !
[参考サイト1](https://kagesai.net/sns-follow-button-design/)

グラデーションの数値は以下のサイトを参考にしました.
[参考サイト2](https://saruwakakun.com/html-css/reference/instagram)

#インスタグラム
とりあえずコードです.  ( `Twitter` `Facebook` に関しては無視してください)

```style.css
.instagram {  /*アイコン背景*/
  text-decoration: none;
  border-radius: 50%;
  width: 30px;
  height: 30px; 
  display: flex; 
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 8px 3px  rgba(176, 169, 169, 0.3) ;
  
  position:relative;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
}
.instagram::before { /*アイコン */
 font-family: "Font Awesome 5 Brands";
 font-weight: 400;
 content: '\f16d';
 color: white;
 font-size: 19px;
 position: relative;
 z-index: 1;
}

.instagram-light {  /*アイコン背景ライト*/
  position: absolute;
  top: 16px;
  left: -6px;
  width: 30px;
  height: 30px;
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}

```
```index.html
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <script src="https://kit.fontawesome.com/fc9fe893cc.js" crossorigin="anonymous"></script>
		<link rel="stylesheet" href="./css/style.css" />
		<title></title>
	</head>
<body>

      <div class="sns">
        <ul>
          <li> <a class="facebook" href="#"></a> </li>
          <li> <a class="twitter" href="#"></a> </li>
          <li> <a class="instagram" href="#"> <span class="instagram-light"></span></a> </li>
        </ul>
      </div>

</body>
</html>

```
#仕組み
アイコン背景 ( `.instagram` )の中に、アイコン( `.instagram::before` )とアイコン背景ライト( `.instagram-light` )　がはいっています.

背景は、インスタのおなじみのグラデーション色を、背景ライトは左下に少し顔をのぞかせている太陽のような部分を表しています. 

このように、`Twitter` や `Facebook` アイコンと違い、`Instagram` アイコンは一枚ほどレイヤーが多く挿入されているといった感じでしょうか. (Adobe風に) 

#アイコン背景

```style.css
.instagram {  /*アイコン背景*/
  text-decoration: none;  
  border-radius: 50%;
  width: 30px;
  height: 30px; 
  display: flex; 
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 8px 3px  rgba(176, 169, 169, 0.3) ;
  
  position:relative;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
}
```
ここでのポイントは以下のコード.

```
  display: flex; 
  justify-content: center;
  align-items: center;
```
これらがやっていることは、「アイコンを中央に配置している」です.
 `flex` めちゃくちゃ便利です.

#アイコン
次に、アイコンみていきましょう.

```style.css
.instagram::before { /*アイコン */
 font-family: "Font Awesome 5 Brands";
 font-weight: 400;
 content: '\f16d';
 color: white;
 font-size: 19px;
 position: relative;
 z-index: 1;
}
```
ここでのポイントは以下のコード.

```
 font-family: "Font Awesome 5 Brands";
 font-weight: 400;
 content: '\f16d';
```
contentの中身を、バックスラッシュ `+` 使いたいアイコンのユニコード(ここでは `f16d`)というふうに設定しています.　`font-family` は `Font Awesome 5 Brands` とし、この `Brands` が重要です.
自分の場合、`font-weight` は `Brands` の場合、`400` に設定します.

そして、アイコンが一番上にくるように、`z-index` を指定します.

#アイコン背景ライト

```style.css
.instagram-light {  /*アイコン背景ライト*/
  position: absolute;
  top: 16px;
  left: -6px;
  width: 30px;
  height: 30px;
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
```
ライトがうまい具合に、左下に重なるように `absolute` で位置指定します.

アイコン背景の `overflow: hidden` にて、はみ出した部分を切り取ります.

#思ったこと
こんな感じです !　やっぱりスタイリングって楽しいですね～.

`FontAwesome` は `html` に直接 `i` タグで書いていたのですが、このアイコンのように、疑似要素で `FontAwesome` 使えるんだなぁ ! と感動しました.

個人的に、スタックしたところは、疑似要素の `FontAwesome` によるアイコン指定の `font-family` のところを、`Font Awesome 5 free` とか普通に `Font Awesome 5` って指定してて、ずっとアイコンが表示されないってとこでした. 

このインスタアイコンの場合は `Font Awesome 5 Brands` でしたね ! 
ここらへんの詳しいことは[`Font Awesome 5 を疑似要素で使う` ](https://www.webdesignleaves.com/pr/plugins/fontawesome_03.html) にて.

誤字・脱字、コード間違えなどありましたら、コメントにてお待ちしております.

ここまで、読んでくださってありがとうございました.