Setting size for icon in CSS
Solution 1:
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 : give fixed pixels to your icon
em : dimensions with respect to your current font. Say ur current font is 12px then 1.5em will be 18px (12px + 6px).
pt : stands for points. Mostly used in print media
% : percentage. Refers to the size of the icon based on its original size.
Solution 2:
You could override the framework CSS (I guess you're using one) and set the size as you want, like this:
.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.
Solution 3:
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.
Solution 4:
this works for me try it.
height:1rem;
font-size: 3.75em;