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

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

似乎字体超棒的人已经意识到了这一点，并且似乎建议切换到svg版本或使用display: block：

  

图标动画+摆动

     

我们一直在努力使图标保持完美   当它们旋转或搏动时居中。但是，我们看到了问题   带有多个浏览器和Web字体+ Font Awesome的CSS版本。   经过大量调查，这似乎是网络问题   字体，而不是我们可以直接修复的字体。我们确实有一个   您可能可以通过以下两种方法解决此问题：

     

切换框架-切换到带有JavaScript版本的SVG，它是   为此工作得更好。设置动画图标的显示-   使用显示：块；在那里你可以。这似乎对此有很大帮助   问题。

取自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>

Answer 2

我分析该图标有一些不平衡的边距，当我们尝试旋转它时会产生一些偏移。 在这里，我重新制作了相同的图标， 检查它是否对您有用。

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