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

Question

我正在尝试实现第二张图片上显示的效果 - 即绿色图标。我目前的状态在第一张图片上(正在处理带有心形符号的图标，但这并不重要)。

Current state
Goal

深入研究问题，我决定将其分解成几个部分:

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;
}

代码取 self 的 asp mvc 应用程序，因为我的代码的第一行可能看起来很奇怪 - 我正在计算 View 中的图标状态。

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

Answer 1

您需要更改填充:padding: 5px; 此外，不建议在 w/h 中添加 !important。