javascript - 如何使 fontawesome4 微调器图标在 dom 上占 100% 大小？

Question

我知道我可以通过设置 font-weight 属性来更改 fontawesome4 图标。但是我怎样才能将值设置为 dom 的 100% 大小。例如:

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

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

这是一个例子:https://codepen.io/zhaoyi0113/pen/LJWVxg
如果您打开此代码笔，您将看到微调器正在以非常小的尺寸旋转。我希望它在 <i> 的中心旋转通过它自己。如果我从 css 中删除高度和宽度，它工作正常。

我知道一些类(class)，例如 fa-5x有效，但我需要计算 <a> 的大小在运行时。如何以编程方式计算微调器尺寸？

Answer 1

问题

问题 #1

“…the size of the <i> <div>^✲ is calculated automatically. So how can I set the font-weight font-size ^† for the spinner icon based on its size?”

问题 #2

“And I want it spinning in the center of the <i> by itself.”

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

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

解决方案

修复 #1

没有提到元素(即 <i> 引用第一个引用: ✲ 以上)如何获得它的移动大小，也没有在运行时提供所述大小的范围，因此演示有 3具有不同 font-size 的单独示例s 和匹配 width值(value)观。

在 <div> 周围包裹一个 block 元素(例如 <i> ) .

每个<div>应该有匹配的 font-size和 width值(value)观。

每个嵌套 <i>永远是一样的font-size因为它是 parent <div>因为 font-size的 1em继承自 parent 。

修复 #2

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

例子

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

演示#1

CSS解决方案A:假设每个 <div>的width , height , 和 font-size都是同等值(value)的。

/*
  ~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 解决方案:基本上 演示#1 用 JavaScript 更新。页面加载时:

width和 font-size每个 <div> 的值 ‡ 将更改为 height 的值

每个 .vx被分配了一个唯一的样式值，以演示 JavaScript 如何处理 <div>大小不一

结果是每个 <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>

笔记

“How can I make the spinner works if the height is not equal to its width?”

如果 <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 .

§ 有一些方法可以拉伸(stretch)字体，但这不值得麻烦，也超出了问题的范围。

引用

.querySelectorAll()

Array.from()

.forEach()

.clientHeight