字体很棒 - 图标

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

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

我发现进行研究的一个可能的解决方案是使用堆叠图标。我非常希望使用一个图标来渲染整个效果 - 如果可能的话。

Answer 1

您需要更改填充：padding: 5px;也不建议使用w / h为!important的填充。