给字体图标（v5）添加边框

Question

这个问题之前在这篇文章中被问到过，但我认为它在新的font-awesome 中不再起作用，因为他们使用了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>

---

编辑：在代码片段中起作用的解决方案
由reiallenramos提供的解决方案

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

- Jeremy

---

简而言之，尝试使用fa-border。来源：https://fontawesome.com/how-to-use/svg-with-js#bordered-pulled-icons - Ron van der Heijden

是的，它不起作用，我会将其添加到代码中。 - Jeremy

啊，我懂C语言，让我来回答吧。 - Ron van der Heijden

Answer 1

我不得不剖析font-awesome的内部。

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

- reiallenramos

---

不是围绕着圆圈，而是围绕着图标。 - Jeremy

抱歉，让我再试一次。 - reiallenramos

谢谢，这个可行！太棒了，我试了将近一个小时。谢谢！ - Jeremy

很高兴能帮忙 :) 快速提示，使用浏览器中的“检查元素”工具。它可以为您提供更多的见解和思路，以解决您的问题。 - reiallenramos

是的，我正在使用它，但我不知道我可以为“path”设置样式。 - Jeremy

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>

- Ron van der Heijden

Answer 3

请将描边颜色设置为图标背景颜色，这样它会看起来像是减少了描边。请尝试使用以下样式：-webkit-text-stroke:4px rgb(190, 53, 48)。

- subir biswas

Answer 4

我猜你想在红色图标周围加上一个圆形边框？

你可以在层级 span 中添加一个新的圆形：

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

- Steven Kuipers