添加字体周围的边框(v5)图标

Question

这个问题以前在this post中已经问过了。但是我不认为它还在使用新的字体--太棒了，因为它们使用svg和path元素。

这个问题是关于在图标周围有一个边框，而不是在外围圈周围。

中的一些解决方案发现我尝试过，但没有奏效：

​

.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="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></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>

​

编辑:在代码中工作的解决方案

雷氏溶液

​

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

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<!-- 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>

​

Answer 1

我不得不解剖字体的内部结构-太棒了。

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

Answer 2

新的FontAwesome方式将是层：https://fontawesome.com/how-to-use/svg-with-js#layering

​

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
<span class="fa-layers fa-fw fa-5x">
   <i class="fas fa-circle" style="color:black"></i>
   <i class="fas fa-circle" data-fa-transform="shrink-3" style="color:Tomato"></i>
   <i class="fa-inverse fas fa-female" data-fa-transform="shrink-6"></i>
</span>

​

Answer 3

请使笔画颜色与图标背景图标相同，然后它将可见像图标笔画是减少。

请试着使用下面的样式。

-webkit-text-stroke:4px rgb(190, 53, 48)