How to stretch text to occupy full height and width

Question

I have div element with height and width. Inside div element, I have a font icon. I would like to make it stretch to full height and width of div element.

Here is a link to show what I have tried.

I'm not a CSS master but I do not believe you will be able to achieve this unless you convert the text icon to an image — The One and Only ChemistryBlob, Sep 23 '16 at 13:34
Or to a svg - https://icomoon.io/app/#/select could do that. — user2718671, Sep 23 '16 at 13:38

score 2 · Answer 1 · answered Sep 23 '16 at 13:36

The only way I can think of to do this would be to surround the text in it's own element and use a CSS transform, but it requires very particular sizing and would need to be experimented with for every icon and situation. I don't believe font-stretching is supported in any browser.

<div class="fa element"><span>&#xf09d;</span></div>

.element span {
  line-height: 0.2;
  display: inline-block;
  transform: scale(1.86,1.15);
  transform-origin: 0 0;
}

Updated bin: http://jsbin.com/mecodanovo/1/edit?html,css,js,output

score 1 · Accepted Answer · answered Sep 23 '16 at 13:40

1

Bit of a horrible answer but it's the only way I can think of doing it. You'd need to add a container and then use the scale transform

.container {
  -ms-transform: scale(1.87, 1.16);
    -webkit-transform: scale(1.87, 1.16);
    transform: scale(1.87, 1.16);
    margin-left: 91px;
    margin-top: 2px;
}

full method below

http://jsbin.com/fiqixudamo/1/edit?html,css,js,output

answered Sep 23 '16 at 13:40

RouthMedia

401
1
4
17

sorry, just seen earlier answer – RouthMedia Sep 23 '16 at 13:41

How to stretch text to occupy full height and width

2 Answers2