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

更好的方法是使用'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像素。

Answer 4

这对我有用。

height:1rem;
font-size: 3.75em;

Answer 5

这些都不适合我。

.fa-volume-down {
    color: white;
    width: 50% !important;
    height: 50% !important;
    margin-top: 8%;
    margin-left: 7.5%;
    font-size: 1em;
    background-size: 120%;
}

Answer 6

很有趣，调整填充似乎可以做到。

.arrow {
  border: solid rgb(2, 0, 0);
  border-width: 0 3px 3px 0;
  display: inline-block;
}

.first{
  padding: 2vh;
}

.second{
  padding: 4vh;
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
 }

<i class="arrow first left"></i>
<i class="arrow second left"></i>

Answer 7

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

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

在CSS中设置图标的大小

7 个答案: