Html 在 CSS 中设置图标的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14482249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting size for icon in CSS
提问by Nacho321
I'm working on JSF, and I'm using this code to display an error box.
我正在研究 JSF，我正在使用此代码显示错误框。
<div class="pnx-msg pnx-msg-warning clearfix">
<i class="pnx-msg-icon pnx-icon-msg-warning"/>
</div>
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?
该<i class.../>部分进口警告图标。它的默认大小是 36 px，但我需要将其调整为 24 px。我该怎么做呢？
Thanks!
谢谢！
采纳答案by Diogo Moreira
You could override the framework CSS (I guess you're using one) and set the size as you want, like this:
您可以覆盖框架 CSS（我猜您正在使用一个）并根据需要设置大小，如下所示：
.pnx-msg-icon pnx-icon-msg-warning {
width: 24px !important;
height: 24px !important;
}
The "!important" property will make sure your code has priority to the framework's code. Make sure you are overriding the correct property, I don't know how the framework is working, this is just an example of !important usage.
"!important" 属性将确保您的代码优先于框架的代码。确保您覆盖了正确的属性，我不知道框架是如何工作的，这只是 !important 用法的一个示例。
回答by Ishan Sharma
you can change the size of an icon using the font sizerather 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.
有 4 种方法可以指定图标的尺寸。
px :give fixed pixels to your icon
px ：为您的图标提供固定像素
em :dimensions with respect to your current font. Say ur current font is 12px then 1.5em will be 18px (12px + 6px).
em ：相对于您当前字体的尺寸。假设你当前的字体是 12px，那么 1.5em 就是 18px (12px + 6px)。
pt :stands for points. Mostly used in print media
pt :代表点数。主要用于印刷媒体
% :percentage. Refers to the size of the icon based on its original size.
% :百分比。指图标在其原始大小的基础上的大小。
回答by moslem
The better way is using '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;
}
even if your icon dimensions is bigger than 10px it will be 10px.
即使您的图标尺寸大于 10 像素，它也会是 10 像素。
回答by Zikra S
this works for me try it.
这对我有用，试试吧。
height:1rem;
font-size: 3.75em;
回答by ArchiPlays
None of those work for me.
这些都不适合我。
.fa-volume-down {
color: white;
width: 50% !important;
height: 50% !important;
margin-top: 8%;
margin-left: 7.5%;
font-size: 1em;
background-size: 120%;
}
