在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像素.我该怎么做呢？

谢谢!

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:代表积分.主要用于印刷媒体

%:百分比.指基于其原始大小的图标大小.

Answer 2

您可以覆盖框架CSS(我猜你正在使用它)并根据需要设置大小,如下所示:

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

"!important"属性将确保您的代码优先于框架的代码.确保你覆盖正确的属性,我不知道框架是如何工作的,这只是一个重要用法的例子.

Answer 3

在 CSS 样式中使用以下代码来自定义图标大小

.pnx-msg i{
    font-size: 0.9em;
}

Answer 4

更好的方法是使用'background-size'.

.pnx-msg-icon .pnx-icon-msg-warning{
background-image: url("../pics/edit.png");
background-repeat: no-repeat;
background-size: 10px;
width: 10px;
height: 10px;
cursor: pointer;
}

即使你的图标尺寸大于10像素,它也将是10像素.