如何使字体图标充满块元素？

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：

\n\n

\n

图标动画 + 摆动

\n\n

我们\xe2\x80\x99努力让图标在旋转或脉冲时保持完美居中。但是，我们\xe2\x80\x99 已经发现多个浏览器和 Font Awesome 的 Web 字体 + CSS 版本存在问题。\n 通过大量调查，这似乎是一般 Web 字体的问题，而不是其他问题。我们可以直接修复。我们确实有几种\n方法供您解决此问题：

\n\n

切换框架 - 切换到带有 JavaScript 版本的 SVG，它\xe2\x80\x99s\n 对此工作得更好。设置动画图标的显示 -\n 使用 display: block; 在那里你可以。这似乎对解决这个问题有很大帮助。

\n

\n\n

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

\n\n

我不能说我可以看到 usingdisplay: block在这里给出的差异，也许其他人可以发现它或添加解释为什么它可能有帮助：

\n\n

\r\n

\r\n

@keyframes circle {\r\n  from {transform: rotate(0deg);}\r\n  to {transform: rotate(360deg);}\r\n}\r\n\r\ndiv {\r\n  padding:0;\r\n  margin:0;\r\n}\r\n.container {\r\n  position:absolute;\r\n  top:50px;\r\n  left:50px;\r\n  border:1px solid red;\r\n  font-size:20px;\r\n  \r\n}\r\n\r\n.inner {\r\n  line-height:0;\r\n  animation-name:circle;\r\n  animation-duration: 1s;\r\n  animation-iteration-count: infinite;\r\n}\r\n\r\n#block {\r\n  display: block;\r\n}\r\n\r\n.two {\r\n  left: 75px;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n