Change Fontawesome icon color

Question

I am trying to create a shape like this via CSS :

I currently managed to create this.

i.fa {
  border-radius: 300px;
  box-shadow: 0 0 3px #888;
  padding: 0.7em 0.7em;
  background-color : #06283d
}

<body>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <i class="fa fa-regular fa-spinner fa-5x"></i>
</body>

Is there a way to change the loading icon to white instead of black?

score 2 · Accepted Answer · answered Jul 12 '22 at 13:12

2

Do you mean add color:white?

i.fa {
  border-radius: 300px;
  box-shadow: 0 0 3px #888;
  padding: 0.7em 0.7em;
  background-color: #06283d;
  color: white;
}

<body>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <i class="fa fa-regular fa-spinner fa-spin fa-5x"></i>

</body>

answered Jul 12 '22 at 13:12

IT goldman

14,885
2
14
28

this is one of the most asked question of stackoverfow, vote to close instead of answering – dippas Jul 12 '22 at 22:36

score 0 · Answer 2 · answered Jul 12 '22 at 13:39

0

i{font-size: 50px;color: #ff0;}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <i class="fa-solid fa-camera-retro"></i>
</body>
</html>

answered Jul 12 '22 at 13:39

Tanmoy

1
1

Please add an explanation. Also it is preferred if you use OP's code instead of using completely different library and icons – mplungjan Jul 12 '22 at 15:06

Change Fontawesome icon color

2 Answers2