Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting size for icon in CSS

Tags:

html

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!

like image 722
Nacho321 Avatar asked Jan 23 '13 14:01

Nacho321


People also ask

How do I style an icon in CSS?

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like <i> or <span> ). All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)

What is a good size for an icon?

Icons work best at the power of 8. So always try and make your icon sizes divisible by 8 — this depends on what grid you're using, if you're using a 10x10 grid then make icons divisible by 10. For best results keep icon sizes consistent with your font sizes.


1 Answers

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.

like image 111
Ishan Sharma Avatar answered Sep 21 '22 00:09

Ishan Sharma