CSS形狀具有形狀之間的空白

我試圖渲染旁邊教授的名字一個RateMyProfessor標誌我創建使用CSS shape generator CSS形狀具有形狀之間的空白

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

但是，如果放大權，有形狀有很大差距：