Set fixed dimension to font-awesome icons

Question

I have a program that depending on the output of one function, gets the status code of one function and returns a font-awesome icon in a card in angular. However the font awesome icons have different dimensions each, so I cannot use the transform: scale() function of css, but I all the icons have to be 45x45px.

I have already tried using transform but I found out the icons didn't have the same dimensions. I have also tried using font-size which fixed only the height (obviously).

Here is the element with the icon

 <div class="msgbox_icon">
      <span class="text-gray-500 fa-4x far {{icon}}"></span>
 </div>

my default font-size is $font-size-base: 0.875rem; //14px

and here is my

.msgbox_icon {
    padding-right:60px;
    padding-left:20px;
    display: flex;
    align-items: center;
}

so I had tried adding font-size: 3.2142857em!important; and then using transform: scale(1.15, 0.987) because for some reason the height wouldn't be 45 but 45.6

I had also tried earlier using width and height but then found out that font-awesome icons behave like text characters.

[Related question but with no valid answer](https://stackoverflow.com/questions/11010457/how-to-change-glyph-height-without-changing-the-font-size) — Martin, Jul 05 '19 at 21:32
Everything I read about this uses `transform: scale` [see here](https://stackoverflow.com/questions/6351013/css-can-i-stretch-text) — Martin, Jul 05 '19 at 21:33
Hi, try to give height and width to your class msgbox_icon & Then try to place space vertically middle. Padding-right & Left will keep on changing. — Robin, Jul 05 '19 at 21:38
@Robin I tried your solution but the problem still persists with the width: 39.38 and height: 45.6. — pavlkara1, Jul 05 '19 at 22:05
@Martin I think using the transform function isn't going to help me because not all the icons used in the application have the same dimensions so unless I can get the dimensions of the icon beforehand, this is not a viable solution. — pavlkara1, Jul 05 '19 at 22:07
@pavlkara1 do you have a shortlist of possible font glyphs you will use? — Martin, Jul 05 '19 at 22:11
These are the icons I'm going to use "fa-hourglass" , "fa fa-hourglass", "fas fa-exclamation-triangle", "fas fa-exclamation-triangle", "fa-check-circle" — pavlkara1, Jul 05 '19 at 22:18
@pavlkara1 can you share code from DOM? Executed code? And try to unset all margins and paddings. — Robin, Jul 06 '19 at 05:45

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Alternative answer:

Because Font Awesome fonts are provided as SVG elements, you can scale them and force their size more easily. Please read this Q&A

This Q&A is also extremely helpful. Your Font-Awesome SVG must have a ViewBox attribute.

Currently Pseudo-code only:

HTML:

<div class="msgbox_icon">
    <span><svg width="45" height="45" viewBox='0 0 50 50'><path d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg></span>
</div>

CSS:

.msgbox_icon > span {
    height: 45px;
    display: flex;
    position:relative
} 
.msgbox_icon > span > svg {
    position:absolute; 
}

Read here about how to exort Font Awesome as SVG.

I am unable to test the above on a font-awesome at the moment, but please reference the linked answers above,

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

This is in fact a very interesting problem and I found some very interesting reading which gives salivating hints to an answer....

Are font metrics controllable with CSS?

...

Short answer: no.

BUT.....

If you are able to view the font glyphs and discover their metric's values, CSS can soup up a solution.

Issue:
To force a/any font glyph to be 45px high.

Solution:

(To research the values referenced below you will need to use a font-reading program such as found here, see also here. I can't find these values online easily, but apparently you should explore the Font-awesome SVG's )

HTML:

<div class="msgbox_icon">
    <span><i class="fas fa-some-icon"></i></span>
</div>

CSS:

.msgbox_icon {
    /* Font metrics */
    /* YOU WILL NEED TO RESEARCH THESE VALUES!! */
    --fm-capitalHeight: 0.68;
    --fm-descender: 0.54;
    --fm-ascender: 1.1;
    --fm-linegap: 0;

    /* Desired font-size for capital height */
    --capital-height: 45;

    /* Apply font-family */
    font-family: 'font-awesome';

    /* Compute font-size to get capital height equal desired font-size */
    --computedFontSize: (var(--capital-height) / var(--fm-capitalHeight));
    font-size: calc(var(--computedFontSize) * 1px);

    /* Then....to centre the glyph */
    --lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
    --contentArea: (var(--lineheightNormal) * var(--computedFontSize));

    /* Then... to centre the line height */
    --distanceBottom: (var(--fm-descender));
    --distanceTop: (var(--fm-ascender) - var(--fm-capitalHeight));

    /* Then.... vertical align */
    --valign: ((var(--distanceBottom) - var(--distanceTop)) * var(--computedFontSize));
    
    /* desired line-height */
    --line-height: 2;
    line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
}
span {
    vertical-align: calc(var(--valign) * -1px);
}

Therefore any font awesome icon loaded into the .msgbox_icon > span element will be forced to be 45px in height.

This is untested. but please read the full documentation. And do the required font-awesome research.

Set fixed dimension to font-awesome icons

2 Answers2

Alternative answer:

Are font metrics controllable with CSS?

BUT.....