【问题标题】: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>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2020-08-28
        • 2013-03-11
        • 2015-09-19
        • 1970-01-01
        • 2019-02-21
        • 2016-06-24
        • 2011-09-14
        • 1970-01-01
        相关资源
        最近更新 更多