can we fill color in toggle-off icon of font awesome?

Question

<i class="fa fa-toggle-off" style="color:red" ></i>

currently , I am using above class and style for toggle off icon

I want to show it as shown below

How can I do that?

Thanks in advance.

Answer 1

With that icon you cannot get what you want. As an alternative, you can use fas fa-toggle-on and rotate it for 180deg. CodePen: https://codepen.io/kitchup/pen/yYeMXE

//HTML
<span class="toggle-off">
  <i class="fas fa-toggle-on"></i>  
</span>

//CSS
.toggle-off{
  display: inline-block;
  font-size: 30px;
  color: red;
  transform: rotate(180deg);
}

Answer 2

<span style="color: red">
    <i class="fa fa-toggle-off"></i>
</span>

You'll need to use something like this.