在 CSS 中设置图标的大小

Question

我在 JSF 上工作，我正在使用这段代码来显示一个错误框。

 <div class="pnx-msg pnx-msg-warning clearfix">
    <i class="pnx-msg-icon pnx-icon-msg-warning"/>
</div>

<i class.../> 部分导入警告图标。它的默认大小是 36 像素，但我需要将其调整为 24 像素。我该怎么做呢？

谢谢！

原文由 Nacho321 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 字体大小 更改图标的大小，而不是设置图标的高度和宽度。这是你如何做的：

 <i class="fa fa-minus-square-o" style="font-size: 0.73em;"></i>

有 4 种方法可以指定图标的尺寸。

px ： 为您的图标提供固定像素

em ： 相对于当前字体的尺寸。假设你当前的字体是 12px 那么 1.5em 就是 18px (12px + 6px)。

pt ： 代表点。主要用于印刷媒体

% ： 百分比。指的是图标在其原始大小的基础上的大小。

原文由 Ishan Sharma 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以覆盖框架 CSS（我猜您正在使用一个）并根据需要设置大小，如下所示：

 .pnx-msg-icon pnx-icon-msg-warning {
    width: 24px !important;
    height: 24px !important;
}

“!important”属性将确保您的代码优先于框架的代码。确保你覆盖了正确的属性，我不知道框架是如何工作的，这只是 !important 用法的一个例子。

原文由 Diogo Moreira 发布，翻译遵循 CC BY-SA 3.0 许可协议