在CSS中设置图标的大小 [英] Setting size for icon in CSS

问题描述

我正在使用JSF，并且正在使用此代码显示错误框。

I'm working on JSF, and I'm using this code to display an error box.

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

< i class ... /> part导入警告图标。默认尺寸为36像素，但我需要将其尺寸调整为24像素。我该怎么做？

The <i class.../> part imports a warning icon. It's default size is 36 px, but I need to resize it to 24 px. How do I do this?

谢谢！

推荐答案

您可以使用字体大小更改图标的大小，而不是设置图标的高度和宽度。这是您的操作方式：

you can change the size of an icon using the font size rather than setting the height and width of an icon. Here is how you do it:

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

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

There are 4 ways to specify the dimensions of the icon.

px：为图标提供固定像素

em：相对于您的尺寸当前字体。假设您当前的字体是12px，那么1.5em将是18px（12px + 6px）。

em : dimensions with respect to your current font. Say ur current font is 12px then 1.5em will be 18px (12px + 6px).

pt：代表点。大多用于印刷媒体

pt : stands for points. Mostly used in print media

％：百分比。根据图标的原始大小引用图标的大小。

% : percentage. Refers to the size of the icon based on its original size.

这篇关于在CSS中设置图标的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！