如何使Fontawesome4微调器图标在dom上占据100％的大小？

Question

I know I can change the fontawesome4 icon by setting font-weight property. But how can I set the value to take 100% size of the dom. For example:

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

the size of the <i> is calculated automatically. So how can I set the font-weight for the spinner icon based on its size?

This is an example on that: https://codepen.io/zhaoyi0113/pen/LJWVxg You will see if you open this codepen that the spinner is spinning in a very small size. And I want it spinning in the center of the <i> by itself. It works fine if I remove the height and width from the css.

I know some classes like fa-5x works but I need to calculate the size of <a> at runtime. How can I calculate the spinner size programmically?

Answer 1

Problems

Issue #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?”

Issue #2

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

---

^✲ The code provided in OP's question has a <div> with the <i> nested within; hence this edit references the <div> as the element that has it's size calculated at runtime.

^† Omar's answer is on the right track — font-size is the CSS property that's needed to manipulate the icon fonts size. The size of the actual <i> tag itself is irrelevant.

---

Solutions

Fix #1

• It wasn't mentioned as to how the element (ie <i> refer to the first reference: ^✲ above ) obtains it's shifting size nor was the range of said sizes provided during runtime, thus the demo has 3 separate examples with varying font-size s and matching width values.

• Wrap a block element (ex. such as a <div> ) around the <i> .

• Each <div> should have matching font-size and width values.

• Each nested <i> will always be the same font-size as it's parent <div> because the font-size of 1em inherits from the parent.

Fix #2

• Due to all <i> being the exact font-size as it's parent <div> font-size , there is no remaining space within the parent <div> that allows an <i> to stray from the center.

---

Examples

Details commented in the following demos.

Demo #1

CSS Solution A: Assuming each <div> 's width , height , and font-size are all of equal 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> 

---

Demo #2

JavaScript Solution: Basically Demo #1 updated with JavaScript. When the page loads:

• the width and font-size values of each <div> ^‡ will be changed to the value of it's height

• each .vx is assigned a unique style values in order to demonstrate how the JavaScript can handle <div> s of different sizes

• the result is that each <div> will be a square — it's size is determined by it's height (including 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 (ie 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> 

---

Note

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

If the <div> 's height differs from it's width it should still work. I recommend that the <div> s should be square so that the font icon can fit edge to edge without requiring any extra styling. Keep in mind that the font icon will not stretch itself out of it's original shape in order to conform to wider or taller lengths of a rectangle ^§ .

Demo #3

CSS Solution B: Demo #1 applying <div> as rectangles.

 /* ~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> 

---

^‡ in Demo #2 each <div> has class: .vx .

^§ there are ways to stretch fonts, but it's not worth the trouble and it's also beyond the scope of the question.

---

References

.querySelectorAll()

Array.from()

.forEach()

.clientHeight

Answer 2

you can use css

i {font-size: 100vw}

or u can access the svg's directly in the download

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