Question

我使用的是字体真棒的svg + js的最新版本。我只能使用内联样式更改图标的颜色。

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

这是显示问题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类获得内联结果？

谢谢。

Answer 1

显然，附加类的前缀fa-会导致错误。解决方案是使用一个没有前缀的额外类：例如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>

另一种解决方案是在包装范围内使用前缀类：

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

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

1 个答案: