Scale font-size to parent for the css content attribute

Question

I am using font awesome for a very long time. But few days back i came across a situation where in i needed to set the font size automatically so that the content covers the entire space of the parent element.

I know about some libraries and methods to do it with text fit and similar but the problem is that they work for the text inside an element. However font awesome works with the css content property and we are required to se the size of the font manually. Is there any way so that i can set the font size to scale to parent element.

Example of css:

div {
  width: 300px;
  height: 300px;
  border:1px solid;
}

i {
  font-size:20px;
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div>
  <i class="far fa-user-circle" />
</div>

Ok, who is setting the `CSS` above? Because if you are setting it. just add `font-size: 300px` into the `div` CSS and remove the `i` statement. — Bibberty, Jan 06 '19 at 06:09
@Bibberty That will set each line to 300px, which I don't think is what the OP wants. — BobRodes, Jan 06 '19 at 06:13
Did you see this answer ? https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Whatatimetobealive, Jan 06 '19 at 06:14
@Whatatimetobealive i have seen and that not fixing in my situation. — Sudhir, Jan 07 '19 at 07:49

Bibberty · Accepted Answer · 2019-01-06T06:21:31.457

0

Here is some script to do the job

const getComputedStyle = (element, style) => {
  let computedStyle = window.getComputedStyle(element, null);  
  return computedStyle[style];
};

let container = document.querySelector('div');
let icon = document.querySelector('div i');
let h = getComputedStyle(container, 'height');
icon.style.fontSize = `${h}`;

div {
  width: 300px;
  height: 300px;
  border:1px solid;
}

i {
  font-size:20px;
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div>
  <i class="far fa-user-circle" />
</div>

edited Jan 06 '19 at 06:21

answered Jan 06 '19 at 06:15

Bibberty

4,670
2
8
23

Note: You need to use the computed style function I have included. – Bibberty Jan 06 '19 at 06:20

Scale font-size to parent for the css content attribute

1 Answers1