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

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

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

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

Answer 2

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>

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

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

javascript

css

icon-fonts

Icon Animation + Wobbles