在 font-awesome (v5) 图标周围添加边框答案

【问题标题】：Add border around font-awesome (v5) icon在 font-awesome (v5) 图标周围添加边框
【发布时间】：2018-02-02 12:53:49
【问题描述】：

这个问题之前在this post 中提出过。但我不认为它仍然可以使用新的 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>

编辑：在 coden-p 中工作的解决方案
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>

【问题讨论】：

TL;DR 试试fa-border。来源：fontawesome.com/how-to-use/svg-with-js#bordered-pulled-icons
是的，它不起作用，我将它添加到代码中。
啊 I C，让我为你解答。

标签： css font-awesome font-awesome-5

【解决方案1】：

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

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

【讨论】：

不是围绕圆圈，而是围绕图标。
对不起。让我再试一次
感谢这项工作！太棒了，我尝试了将近一个多小时。泰
乐于助人 :) 快速提示，使用浏览器中的检查元素工具。它为您提供有关如何解决问题的更多见解和想法
是的，我正在使用它，但我不知道我可以为 path 设置样式

【解决方案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>

【讨论】：

【解决方案3】：

请使笔触颜色与图标背景图标相同，然后它将像图标笔触缩小一样可见。

请尝试使用以下样式。

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

【讨论】：

【解决方案4】：

我猜你想要红色图标周围有一个圆形边框？

您可以在图层跨度内添加一个新圆圈：

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

【讨论】：