CODEWITHSUNDEEP
htmlcss
Nacho321
Nacho321

Reputation: 1991

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!

Upvotes: 57

Views: 451490

Answers (9)

Jiao
Jiao

Reputation: 121

font-size: 200% !important; it works for me

Upvotes: 1

Ozer Ozturk
Ozer Ozturk

Reputation: 209

Actually, I was able to change the size of the icon using just !important. But is there any way to change without using !important. I tried without using this but I somehow couldn't change the size of the icon.

Upvotes: 0

Takesha Kaluarachchi
Takesha Kaluarachchi

Reputation: 439

use the below code in CSS style to customize icon size

.pnx-msg i{
    font-size: 0.9em;
}

Upvotes: 8

bleong
bleong

Reputation: 1

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>

Upvotes: 0

ArchiPlays
ArchiPlays

Reputation: 71

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

Upvotes: 0

Zikra S
Zikra S

Reputation: 11

this works for me try it.

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

Upvotes: 1

Kourosh
Kourosh

Reputation: 1074

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.

Upvotes: 9

Ishan Sharma
Ishan Sharma

Reputation: 1356

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.

Upvotes: 127

Diogo Moreira
Diogo Moreira

Reputation: 1082

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.

Upvotes: 23

Related Questions