How to make font icon be full of a block element?

Question

I want to make a rotated animation of a font icon, but I can not let the center be the right place, The rotation is always offset a little.

Here is the example:

@keyframes circle {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

div {
  padding:0;
  margin:0;
}
.container {
  position:absolute;
  top:50px;
  left:50px;
  border:1px solid red;
  font-size:20px;
  
}

.inner {
  line-height:0;
  animation-name:circle;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>

JSFiddle : https://jsfiddle.net/217z69sm/2/

Answer 1

It seems like font-awesome are aware of this, and there suggestion seems to be to switch to the svg version, or to use display: block:

Icon Animation + Wobbles

We’ve worked hard to keep icons perfectly centered when they are spinning or pulsing. However, we’ve seen issues with several browsers and the web fonts + CSS version of Font Awesome. Through a lot of investigation this appears to be an issue with web fonts in general and not something we can directly fix. We do have a couple of ways you might be able to work around this:

Switch Frameworks - Switch to the SVG with JavaScript version, it’s working a lot better for this. Set the display of the animating icon - Use display: block; where you can. This seems to help a lot with this issue.

Taken from https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

I can't say that I can see the difference which using display: block gives here, perhaps others can spot it or add an explanation of why it might help:

@keyframes circle {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

div {
  padding:0;
  margin:0;
}
.container {
  position:absolute;
  top:50px;
  left:50px;
  border:1px solid red;
  font-size:20px;
  
}

.inner {
  line-height:0;
  animation-name:circle;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#block {
  display: block;
}

.two {
  left: 75px;
}

<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
<div class="container two"><div class="inner"><i class="fas fa-adjust" id="block"></i></div></div>

Answer 2

I analysis that the icon has some unbalance margins, which is creating a little offset when we try to rotate it. here, I remake the same icon, check if it works for you.

 @keyframes circle {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.container {
  position:absolute;
  top:50px;
  left:50px;
  border:1px solid red;
  font-size:300px;
  
}
.inner {
  padding: 2px;
  animation-timing-function: linear;
  animation-name:circle;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.rot{
 border: 10px solid black;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 background-image: linear-gradient(to left,black 0%, black 50%,     white 50%,white 100%);
}

  <div class="container">
   <div class="inner">
    <div class="rot">
     
    </div>
   </div>
  </div>