46

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

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

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

谢谢！

4

8 回答 8

107

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

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

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

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

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

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

%：百分比。指图标的大小基于其原始大小。

于 2014-04-02T11:50:46.930 回答
22

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

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

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

于 2013-01-23T15:03:31.860 回答
8

更好的方法是使用“背景大小”。

.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 像素。

于 2014-11-24T08:46:28.877 回答
1

这对我有用，试试吧。

height:1rem;
font-size: 3.75em;
于 2019-07-19T14:32:38.237 回答
1

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

.pnx-msg i{
    font-size: 0.9em;
}
于 2021-07-22T05:36:28.427 回答
0

这些都不适合我。

.fa-volume-down {
    color: white;
    width: 50% !important;
    height: 50% !important;
    margin-top: 8%;
    margin-left: 7.5%;
    font-size: 1em;
    background-size: 120%;
}
于 2019-09-14T18:37:32.037 回答
0

有趣的是，调整填充似乎可以做到这一点。

.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>

于 2020-09-23T15:43:18.230 回答
0

实际上，我可以使用 !important 来更改图标的大小。但是有什么方法可以在不使用 !important 的情况下进行更改。我尝试不使用它，但不知何故无法更改图标的大小。

于 2021-12-14T22:00:19.213 回答