时间戳

首页 > 解决方案 > 为字体真棒图标设置固定尺寸

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

问题描述

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

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

这是带有图标的元素

 <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

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

标签： cssangularsassfont-awesomefont-awesome-5

解决方案

替代答案：

因为 Font Awesome 字体是作为SVG元素提供的，所以您可以更轻松地缩放它们并强制它们的大小。请阅读此问答

这个问答也非常有帮助。你的 Font-AwesomeSVG 必须有一个ViewBox属性。

目前仅限伪代码：

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; 
}

在此处阅读有关如何将 Font Awesome 导出为 SVG 的信息。

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

推荐阅读