Menu
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!
722
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.)
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.
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.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With