javascript - 如何让字体图标充满 block 元素？

Question

我想做一个字体图标的旋转动画，但是我不能让中心在正确的位置，旋转总是偏移一点。

例子如下:

@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

似乎 font-awesome 意识到了这一点，并且建议切换到 svg 版本，或者使用 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.

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

我不能说我可以看到使用 display: block 在这里给出的区别，也许其他人可以发现它或添加对原因的解释它可能会有所帮助:

@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>