字体很棒-图标周围有两个圆圈

Question

我正在尝试实现第二张图片上显示的效果-即绿色图标。 我当前的状态在第一张照片上（使用带有心脏符号的图标工作，但这并不重要）。

当前状态
目标

研究问题，我决定将其分为几部分：

1. 渲染基本图标（白色）
2. 图标周围的第一个圆圈（具有所需的颜色-在这种情况下为红色）
3. 图标下方的矩形
4. 图标周围的第二个圆圈（再次为白色）-这应该覆盖从点3开始的矩形的一部分，以创建边缘效果。

我已经可以使用当前代码完成前两点了：

<i class=\"fas fa-heart fa-lg\"></i> 

fa-heart被覆盖的地方：

    .fa-heart {
    display: inline;
    border-radius: 60px;
    box-shadow: 0px 0px 2px #888;
    background: #d44d32;
    width: 18px !important;
    height: 18px !important;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    padding: 3px;
    color: white !important;
}

由于我的代码的第一行可能看起来很奇怪，因此代码是从asp mvc应用程序中获取的-我正在计算视图中的图标状态。

我在研究中发现的一种可能的解决方案是使用堆叠的图标。 我非常想使用一个图标渲染整个效果-如果可能的话。

Answer 1

您需要更改填充： padding: 5px; 同样，不建议在w / h中使用!important 。