Facebook、Twitter 图标请取消注释以获取链接答案

【问题标题】：Facebook, twitter icon please uncoment to get the linkFacebook、Twitter 图标请取消注释以获取链接
【发布时间】：2020-06-18 01:51:25
【问题描述】：

我试图让它响应但反而搞砸了。请帮忙。

<!--HERE is the link-->
<!--https://codepen.io/petitkwoba/pen/yLeVpXQ-->
<!DOCTYPE html>
<html lang="en">

  
<body>


</body>

</html>

【问题讨论】：

分享代码/您已经尝试过的内容也会有所帮助。
请张贴 CSS & HTML 代码 sn-p。如果可能的话，发布一个 stackblitz 链接。会有帮助的。

标签： html css responsive-design

【解决方案1】：

我希望这就是你要找的东西

.icon
{
  background-color: blue;
  height:40px;
  width:40px;
  border-radius: 28px;
}
img{
  padding-top:8px;
  padding-left:9px;
}

<div class="icon">
<img src="https://www.iconsdb.com/icons/download/white/twitter-24.png"/>
</div>

【讨论】：

【解决方案2】：

欢迎使用 StackOverflow。

您应该向我们展示您的尝试，以便我们为您提供帮助。

无论如何，有几种方法可以做到。

我们已经“圈出”图标。
使用 div/span 包含图标（使用基本宽度/高度/行高或使用 flex 使图标居中）
使用 Font-awesome (Documentation) 的“堆栈”方式

.icon {
  display: inline-block;
  text-align: center;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background-color: #4267b2;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="icon">
    <i class=" fa fa-facebook"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

【讨论】：

【解决方案3】：

如果你考虑用图标来实现，可以参考我贴的代码。

.icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #4267b2;
  color: white;
  font-size: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="icon"><i class=" fa fa-facebook"></i></span>
<span class="icon"><i class="fa fa-twitter"></i></span>
<span class="icon"><i class="fa fa-instagram"></i></span>

【讨论】：