css – 在font-awesome(v5)图标周围添加边框

这个问题之前已经在 this post问过.但是我认为它仍然没有使用新的字体 – 因为它们使用svg和path元素.

我希望它围绕图标而不是圆圈.

我试过这个

-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;

还有这个：

text-shadow: 0px 0px 3px #000;

还有这个：

fa-border

办法

.fa-female, .fa-music{
  color: #BBB;
}

.fa-female{
  -webkit-text-fill-color: #BBB;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke:4px #00FF00;
}

.fa-music{
  text-shadow: 0px 0px 3px #00FF00;
}

<script defer src="http://img.558idc.com/uploadfile/allimg/210613/1349492648-0.jpg"></script>
 
<!-- Female Icon --> 
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, 53, 48)">
  <i class="fas fa-circle"></i>
  <i class="fas fa-female fa-inverse" data-fa-transform="shrink-6 fa-border"></i>
</span>

<!-- Music Icon --> 
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, 53, 48)">
   <i class="fas fa-circle"></i>
   <i class="fas fa-music fa-inverse" data-fa-transform="shrink-8 fa-border"></i>
</span>

<i class="fas fa-music fa-inverse fa-5x" style="color: black;"></i>

我不得不剖析font-awesome的内部结构.

.fa-music g g path {
  stroke: black;
  stroke-width: 10;
}