snsアイコンを作ろう

問題

今回はwebサイトでよく見かける
twitterやinstagramのアイコンを表示してみましょう！
外部サイトなどを使用して、アイコンを頑張って表示して見ましょう！
※画像を直で使用するのは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¥

期待する画面

解答ソースコード

              .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¥

解説

今回はfontawesomeという外部サイトを利用してアイコンを表示しなければなりません。
外部サイトはheadタグの中にlinkタグを作り、linkタグのhrefにサイトのurlを挿入して読み込みます。
fontawesomeのサイトにアクセスし、iconのページから好きなアイコンを検索して、htmlのコードをコピーし、
好きなところに埋め込みます。

次にコードの説明ですが、iタグの色はcolorで変更できます。 twitterは問題ないかと思います。問題はinstagramです。文字にグラデーションをかけるには、

①-webkit-background-clip:text;でbackgroundの適応範囲を文字の中にする。
②-webkit-text-fill-color:transparent;で文字色を透過します。
③backgroundにlinear-gradientを使ってグラディーションの背景にします。

ログインして解答を見る