[html] Setting size for icon in CSS

I'm working on JSF, and I'm using this code to display an error box.

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

Thanks!

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%;
}

this works for me try it.

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

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.

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.

Funnily enough, adjusting the padding seems to do it.

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