Javascript 如何使fontawesome4微调器图标在dom上具有100%的大小？

我知道我可以通过设置font-weight属性来更改fontawesome4图标。但是，我如何设置该值以获得100%的dom大小呢。例如：

<i class="fa fa-spinner" />

的大小是自动计算的。那么，如何根据微调器图标的大小设置其字体权重呢

这是一个例子： 如果打开此代码笔，您将看到微调器正在以非常小的尺寸旋转。我想让它自己在

的中心旋转。如果我从css中删除高度和宽度，效果会很好

我知道像

fa-5x

这样的类可以工作，但我需要在运行时计算

的大小。如何通过编程计算微调器大小？

您可以使用css

i{font size:100vw}

或者你可以在下载中直接访问svg

<img width="100%" src="assets/fontawesome-free-5.0.1/advanced-options/raw-svg/spinner.svg">

问题 问题1 “…的大小

✲是自动计算的。那么如何根据微调器图标的大小设置其

字体重量

字体大小

†

问题2 “我希望它自己在

的中心旋转。”

---

✲在OP的问题中有一个嵌套了

的

；因此，此编辑引用

作为在运行时计算其大小的元素

†正确-

字体大小

是操作图标字体大小所需的CSS属性。实际的

标记本身的大小是不相关的

---

解决 修正#1

• 没有提到元素（即
  如何引用第一个引用：✲以上）获得了它的移动大小，也没有在运行时提供所述大小的范围，因此演示有3个单独的示例，具有不同的

  字体大小

  s和匹配的

  宽度

  值

• 将块元素（例如
  ）缠绕在
  周围

• 每个
  都应该有匹配的

  字体大小

  和

  宽度

  值

• 每个嵌套的
  将始终与其父级的

  字体大小相同，因为
  1em的
  字体大小从父级继承
  

修正2

• 由于所有的
  字体大小与父

  字体大小

  完全相同，因此父
  中没有剩余空间允许
  偏离中心

---

例子 在下面的演示中对详细信息进行了评论

演示#1 CSS解决方案A:假设每个

的

宽度

、

高度

和

字体大小

都具有相同的值

/*
~REQUIRED~所有字体的大小都是：1em——就是那个特殊的字体
值相当于它的字体大小
父级的字体大小——因此每个字体都将与其父级一致
元素的字体大小。
*/
我{
字号：1em；
}
/*
~OPTIONAL~。添加bx以演示每个图标都居中
在它的周长内旋转，而不是绕着它旋转。
*/
.bx{
边框：1px实心#000；
}
/* 
~REQUIRED~.box0、.box1和.box2的字体大小可以任意
和匹配的宽度。
*/
.box0{
字体大小：50px；
宽度：50px；
}
.box1{
字体大小：100px；
宽度：100px；
}
.box2{
字体大小：200px；
宽度：200px；
}

DOM的大小是多少？您可能指的是字体大小？DOM的大小是在运行时计算的。它可以更改。我刚刚尝试了

字体大小：100vw

似乎使微调器采用整个窗口大小，而不是

大小。此外，微调器围绕整个窗口旋转，而不是自身旋转。问题是我需要在运行时计算

的大小。我不能在dom中使用固定的

fa-5x

。嗨@ZhaoYi，我想我明白你的问题了。基本上，您需要将字体图标设置为

的100%宽度和高度，而不是

。然后将

font-size:1em

应用于嵌套的

，它将始终是父

的确切

字体大小。请参阅更新的答案。您好@zer0One，如果div高度等于其宽度，则该选项有效。如果高度不等于宽度，如何使微调器工作？我想选择高度和宽度的最小值，但它似乎不起作用。@ZhaoYi请查看更新的答案（请参阅：Demo#2/#3）