如何使字体真棒4微调器图标在dom上占据100％的大小？

Question

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

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

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

这是一个例子：https://codepen.io/zhaoyi0113/pen/LJWVxg你会看到你打开这个编码器，旋转器旋转的尺寸非常小。我希望它本身在<i>的中心旋转。如果我从css中删除高度和宽度，它工作正常。

我知道像fa-5x这样的类有效，但我需要在运行时计算<a>的大小。如何以程序方式计算微调器尺寸？

Answer 1

Problems

问题＃1

“......的大小 <i> <div>✲自动计算。那我怎么设置 font-weight font-size†根据它的大小调整微调器图标？“

问题＃2

“我希望它本身在<i>的中心旋转。”

---

OP在OP的问题中The code provided有一个<div>与<i>嵌套在内;因此，此编辑引用<div>作为在运行时计算其大小的元素。

†Omar's answer在正确的轨道上 - font-size是操纵图标字体大小所需的CSS属性。实际的<i>标签本身的大小是无关紧要的。

---

Solutions

修复＃1

• 没有提到元素（即<i>参考第一个参考：上面的））获得它的移动大小，也不是在运行时提供的所述大小的范围，因此该演示有3个单独的例子，具有不同的font-sizes和匹配的width值。
• 在<div>周围包裹一个块元素（例如<i>）。
• 每个<div>应该具有匹配的font-size和width值。
• 每个嵌套的<i>将始终与它的父级font-size相同<div>，因为font-size的1em继承自父母。

修复＃2

• 由于所有<i>都是确切的font-size，因为它的父母<div> font-size，在父母<div>内没有剩余空间允许<i>偏离中心。

---

Examples

详细信息在以下演示中评论。

演示＃1

CSS解答答：假设每个<div>的width，height和font-size都具有相同的价值。

/*
  ~REQUIRED~ All <i> have the font-size: 1em -- that particular
  value is an equivalent to the the same font-size as it's  
  parent's font-size -- thus each <i> will conform to it's parent
  element's font-size.
*/

i {
  font-size: 1em;
}


/*
 ~OPTIONAL~ .bx is added to demonstrate that each icon is centered
 and rotating within it's perimeter instead of orbiting around it.
*/

.bx {
  border: 1px solid #000;
}


/* 
 ~REQUIRED~ .box0, .box1, and .box2 are at arbitrary font-sizes
 and matching width. 
*/

.box0 {
  font-size: 50px;
  width: 50px;
}

.box1 {
  font-size: 100px;
  width: 100px;
}

.box2 {
  font-size: 200px;
  width: 200px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class='bx box0'><i class="fa fa-spinner fa-spin"></i></div>

<div class='bx box1'><i class="fa fa-spinner fa-spin"></i></div>

<div class='bx box2'><i class="fa fa-spinner fa-spin"></i></div>

---

演示＃2

JavaScript解决方案：基本上使用JavaScript更新了演示＃1。页面加载时：

• 每个width‡的font-size和<div>值将改为它的值height
• 每个.vx都分配了一个独特的样式值，以演示JavaScript如何处理不同大小的<div>s
• 结果是每个<div>将是一个正方形 - 它的大小由它的height（包括padding-top/bottom）决定。

// Collect all .vx into a NodeList then convert it into an array.
const vxArray = Array.from(document.querySelectorAll('.vx'));

// For each div.vx in the new array (i.e. vxArray.)...
vxArray.forEach(function(div) {

  // ...get the current <div>'s height and...
  let vxH = div.clientHeight + "px";

  // ...then assign that value to the <div>'s dimensions and...
  div.style.width = vxH;
  div.style.height = vxH;

  // ...change the <div>'s font-size as well.
  div.style.fontSize = vxH;

});

/*
 ~REFERENCE~ Details of property/values in Demo #1 that occur in
 Demo #2 can be found in Demo #1.
*/

i {
  font-size: 1em;
}

.vx {
  border: 1px solid #000;
}

.box3 {
  height: 42px;
}

.box4 {
  font-size: 89px;
}

.box5 {
  height: 4rem;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class='vx box3'><i class="fa fa-spinner fa-spin"></i></div>

<div class='vx box4'><i class="fa fa-spinner fa-spin"></i></div>

<div class='vx box5'><i class="fa fa-spinner fa-spin"></i></div>

---

注意

“如果高度不等于宽度，我怎样才能使微调器工作？”

如果<div>的height与它的width不同，它应该仍然有效。我建议<div>s应该是方形的，这样字体图标可以适合边缘到边缘，而不需要任何额外的样式。请记住，字体图标不会从其原始形状伸展出来，以符合更宽或更长的矩形§。

演示＃3

CSS解决方案B：演示＃1将<div>应用为矩形。

/* 
 ~OPTIONAL~ Applied is a common default -- needed when layout
 elements have relative measurements.
*/

html,
body {
  height: 100%;
  width: 100%;
}

i {
  font-size: 1em;
}


/* 
 ~REQUIRED~ First 3 property/values centers <i> vertically and
 horizontally.
*/

.rx {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}

.rec0 {
  font-size: 50px;
  height: 50px;
}


/*
 ~OPTIONAL~ inline-block elements default: width:auto -- 
 <div> width = width of <div>'s content.
*/

.rec1 {
  font-size: 100px;
  display: inline-block;
}

.rec2 {
  font-size: 20ch;
  height: 100%;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class='rx rec0'><i class="fa fa-spinner fa-spin"></i></div>

<div class='rx rec1'><i class="fa fa-spinner fa-spin"></i></div>

<div class='rx rec2'><i class="fa fa-spinner fa-spin"></i></div>

---

‡在演示＃2中，每个<div>都有类：.vx。

§有一些方法来拉伸字体，但它不值得麻烦，它也超出了问题的范围。

---

References

.querySelectorAll()

Array.from()

.forEach()

.clientHeight

Answer 2

你可以用css

i {font-size: 100vw}

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

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