Question

为什么图标与边框重叠？
我知道padding将解决问题，但我想知道重叠的原因。

i {
  background-color: #ccc;
  border-radius: 50%;
  border: 3px red solid;
}

<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<i class="fab fa-500px fa-5x"></i>
<!--icon1-->
<i class="fab fa-accusoft fa-5x"></i>
<!--icon2-->

Answer 1

非常棒地绘制SVG图标，因此在您的情况下，该图标并未针对边框半径CSS属性进行优化。

不幸的是，您需要为每个自定义CSS。

请参见下面的示例。

.fa-500px {
   margin: 10px;
}

.fa-accusoft {
    margin: 0;
}

div {
  background-color: #ccc;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px red solid;
  padding: 5px;
}

<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<div>
    <i class="fab fa-500px fa-5x"></i>
</div>
<!--icon1-->
<br />
<div>
    <i class="fab fa-accusoft fa-5x"></i>
</div>

为什么字体真棒图标与边框重叠？

1 个答案: