在文本之前呈现的CSS形状在形状之间具有空白空间

Question

我正在尝试使用CSS shape generator

在我创建的教授姓名旁边呈现一个RateMyProfessor徽标

<td>
    <i class="my-icon"><i></i><i></i><i></i><i></i></i>
    <a
        href=
        "{{ URL_GOES_HERE
        }}"
        @if(
            $class->enroll === $class->max_enroll ||
            $class->enroll === "FULL"
        )
            class="moreMuted"
        @endif
    >
        <span class="instructor">{{ $class->instructor}}</span>
    </a>
</td>

这是我的CSS：

.my-icon {
  position: relative;
}
.my-icon > i {
  position: absolute;
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #26abe3;
  left: 10.5px;
  top: 0px;
}
.my-icon > i+i {
  position: absolute;
  display: inline-block;
  width: 3.5px;
  height: 3.5px;
  background-color: #26abe3;
  left: 7px;
  top: 3.5px;
}
.my-icon > i+i+i {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  line-height: 0;
  border: 1.75px solid #b3d237;
  border-bottom: 1.75px solid #b3d237;
  left: 7px;
  top: 0px;
}
.my-icon > i+i+i+i {
  position: absolute;
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #b3d237;
  left: 0px;
  top: 0px;
}

.instructor {
  margin-left: 20px;
}

但是，如果直接放大，形状之间会有很大差距：

只有在缩小到150％时才会看到间隙。

所以我的问题是：

1. 如何渲染类似于所有缩放级别的图标？

2. 有更好的方法吗？

我之前做的是渲染.png他们的图标（透明度），但由于图标不是矢量，因此边缘不是像素完美且非常模糊。所以我再次做的是在Photoshop中制作像素图标，将其保存为PNG，但 仍然模糊不清。

Answer 1

其他解决方案是将您的徽标转换为SVG格式。