Setting size for icon in CSS

Question

I m working on JSF  and I m using this code to display an error box     lt div class  pnx-msg pnx-msg-warning clearfix  gt       lt i class  pnx-msg-icon pnx-icon-msg-warning   gt   lt  div gt    The  lt i class     gt  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   Thanks

User · Answer

this works for me try it   height 1rem  font-size  3 75em

User · Answer

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    lt i class  fa fa-minus-square-o  style  font-size  0 73em   gt  lt  i gt    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

User · Answer

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

User · Answer

Funnily enough  adjusting the padding seems to do it   x000D   x000D   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      x000D   lt i class  arrow first left  gt  lt  i gt   lt i class  arrow second left  gt  lt  i gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

[html] Setting size for icon in CSS

Examples related to html

Examples related to css