Изменение цвета приводит к тому, что значок не отображается в svg-версии font-awesome 5 - PullRequest
Новая
       18

Изменение цвета приводит к тому, что значок не отображается в svg-версии font-awesome 5

1 голос
/ 08 мая 2019

Я использую последнюю версию font-awesome 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?

Спасибо.

1 Ответ

0 голосов
/ 08 мая 2019

Очевидно, префикс 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>
...