颜色变化导致图标不显示在 font-awesome 5 的 svg 版本上

Question

我使用的是最新版本的 font-awesome svg+js。我只能用内联样式更改图标的颜色。

每当我添加 class 时，图标就会停止显示，变成一个闪烁的感叹号。

这是显示问题的小 fiddle https://jsfiddle.net/CaioSantAnna/Lb5dpo7v/7/

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

    <span class="fa-4x" style="background: #4CAF50">
      <i class="far fa-circle" style="color:white"></i>
      <i class="far fa-circle fa-white"></i>
    </span>

    <style type="text/css">
        .fa-white{
            fill:#ffffff;
            color: #ffffff;
        }
    </style>

是否可以用普通的 css class 实现内联结果？

谢谢。

Answer 1

显然前缀 fa- 额外的 class 会导致错误。解决方案是使用不带前缀的额外 class：例如 white 而不是 fa-white

    .white{
        fill:#ffffff;
        color: #ffffff;
    }

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

<span class="fa-4x" style="background: #4CAF50">
  <i class="far fa-circle"></i>
  <i class="far fa-circle white"></i>
</span>

另一种解决方案是在包装跨度上使用前缀 class：

    .fa-white{
        fill:#ffffff;
        color: #ffffff;
    }

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

<span class="fa-4x  fa-white" style="background: #4CAF50">
  <i class="far fa-circle"></i>
  <i class="far fa-circle"></i>
</span>

颜色变化导致图标不显示在 font-awesome 5 的 svg 版本上

Color change causes icon to not show on svg version of font-awesome 5

svg

font-awesome-5