为字体真棒图标设置固定尺寸

Posted 2023-03-06

【中文标题】为字体真棒图标设置固定尺寸

【英文标题】：Set fixed dimension to font-awesome icons

【发布时间】：2019-11-16 10:48:33

【问题描述】：

我有一个程序，它根据一个函数的输出，获取一个函数的状态代码，并在卡片中以角度返回一个很棒的字体图标。但是字体真棒图标都有不同的尺寸，所以我不能使用css的transform: scale()功能，但我所有的图标都必须是45x45px。

我已经尝试过使用transform，但我发现图标的尺寸不同。我也尝试过使用font-size，它只固定了高度（显然）。

这是带有图标的元素

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

我的默认字体大小是 $font-size-base: 0.875rem; //14px

这是我的

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

所以我尝试添加font-size: 3.2142857em!important; 然后使用 transform: scale(1.15, 0.987) 因为由于某种原因，高度不会是 45 而是 45.6

我之前也尝试过使用宽度和高度，但后来发现字体很棒的图标表现得像文本字符。

【问题讨论】：

请分享您到目前为止尝试过的代码

Related question but with no valid answer

我读到的关于这个的所有内容都使用transform: scalesee here

嗨，尝试为您的班级 msgbox_icon 提供高度和宽度，然后尝试将空间垂直放置在中间。 Padding-right & Left 将不断变化。

@Robin 我尝试了您的解决方案，但问题仍然存在，宽度：39.38 和高度：45.6。

【参考方案1】：

这实际上是一个非常有趣的问题，我发现了一些非常interesting reading 给出答案的提示......

---

是否可以通过 CSS 控制字体度量？

...

简答：不。

---

但是.....

如果您能够查看字体字形并发现其度量值，CSS 可以提供解决方案。

问题： 强制一个/任何字体字形为 45px 高。

解决方案：

（要研究下面引用的值，您需要使用字体阅读程序，例如 found here，另请参阅 here。我无法在网上轻松找到这些值，但显然您应该探索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);

因此，任何加载到.msgbox_icon > span 元素中的超棒字体图标都将被强制为 45px 高度。

这是未经测试的。但是please read the full documentation。并执行required font-awesome research。

【参考方案2】：

另一种答案：

因为 Font Awesome 字体是作为 SVG 元素提供的，所以您可以更轻松地缩放它们并强制它们的大小。 Please read this Q&A

This Q&A 也非常有帮助。你的 Font-Awesome SVG 必须有一个 ViewBox 属性。

目前只有伪代码：

HTML：

<div class="msgbox_icon">
    <span><svg   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 关于如何将 Font Awesome 导出为 SVG。

我目前无法在字体真棒上测试上述内容，但请参考上面的链接答案，