圆形图标充当正方形

Posted

技术标签:

【中文标题】圆形图标充当正方形【英文标题】:Circular icons act as squares 【发布时间】:2018-09-05 05:53:31 【问题描述】:

我正在用一些社交媒体图标(Font-awesome)在引导程序中创建一张卡片。出于某种原因,我的所有图标都被视为框,并且周围有黑色轮廓。我的悬停阴影也环绕正方形而不是图标本身。

为什么会发生这种情况,我该如何解决?

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-12 text-center">
  <a href="" type="button" class="btn-floating btn-small">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x" style="color:#00aced;"></i>
      <i class="fa fa-twitter fa-stack-1x" style="color:#ffffff;"></i>
    </span>
  </a>

  <a href="" type="button" class="btn-floating btn-small">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x" style="color:#0077B5;"></i>
      <i class="fa fa-linkedin fa-stack-1x" style="color:#ffffff;"></i>
    </span>
  </a>

  <a href="" type="button" class="btn-floating btn-small">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x" style="color:#171515;"></i>
      <i class="fa fa-github fa-stack-1x" style="color:#ffffff;"></i>
    </span>
  </a>
</div>

【问题讨论】:

您应该使用text-shadowfilter: drop-shadow 而不是box-shadow 感谢您的提示!即使没有阴影,图标周围仍然有那个框 【参考方案1】:

框边框是由您的锚点中的type="button" 参数生成的,它在引导程序的样式表中定义了-webkit-appearance: button;。所以删除 type="button" 参数,或根据需要设置样式。

至于阴影,如果你想让它们保持图标的形状而不是被框起来,你应该使用text-shadowfilter: drop-shadow而不是box-shadow

【讨论】:

以上是关于圆形图标充当正方形的主要内容,如果未能解决你的问题,请参考以下文章

强制android使用方形启动器图标

圆形图标弹出菜单的正确波纹效果形状

各种纯css图标

快速用 Sketch 绘制30个图标

编写一个程序计算“三角形、正方形、圆形"三种图形的面积,求:a)抽象出一个基类base b)在其中

css怎么在圆形外面再嵌套一个正方形