SNSアイコンを作ろう

Question

問題2：SNSアイコンを作ろう

今回はwebサイトでよく見かける
twitterやinstagramのSNSアイコンを表示してみましょう！
外部サイトなどを使用して、アイコンを頑張って表示して見ましょう！
※画像を直で使用するのはNGです。
以下のコードを使ってください。
※twitterの色は#00ACEE、instagramの色は#C51DCD、#FDBA2Eの二色を使ってください。

あらかじめエディタに書くコード

                <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
  <div class="twitter icon"><i class="fab fa-twitter"></i></div>
  <div class="instagram icon"><i class="fab fa-instagram"></i></div>
</body>
</html>
¥HTML¥

                .icon{
  width: 100px;
  height: 100px;
  display: inline;
  cursor: pointer;
}
¥CSS¥

Answer 1

解答ソースコード

              .twitter{
  color: #00ACEE;
}
.instagram i{
  background: linear-gradient(to bottom left,#C51DCD,#FDBA2E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon:hover i{
  transform: scale(1.1);
}
.icon i{
  font-size: 3em;
  transition-duration: .5s;
}
¥CSS¥

SNSアイコンを作ろう

問題2：SNSアイコンを作ろう

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説