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

Question

I'm using the latest version of font-awesome svg+js. I can only change the color of the icons with inline style.

Whenever I add a class, the icon stops showing and it becomes a flashing exclamation point.

This is a small fiddle showing the problem 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>

Is it possible to achieve the inline result with a common css class ?

Thanks.

Answer 1

Apparently the prefix fa-for an additional class will cause an error. The solution would be using an extra class without the prefix: for example white instead of 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>

An alternative solution would be using the prefixed class on the wrapping 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>